cursors on desktop + mobile mode
There's a small part of the index.html file of the starter project that I didn't talk about in Part 1. It starts at line 25. Take a peek:
<a-entity id="camera" position="0 1.6 0" camera="" look-controls="" wasd-controls=""> </a-entity>
<a-entity cursor="rayOrigin: mouse"></a-entity>
<a-entity laser-controls="hand: right"></a-entity>
We saw in the first few projects that A-Frame creates a default camera automatically, but I made my own camera in this project because I want to configure it a bit. So, this entity has the camera component, the look-controls component (this is what lets you click and drag the mouse to rotate the view of the camera), and the wasd-controls component (this is what lets you press the wasd keys to move the camera around the scene). All of these components are included with A-Frame and you can learn more about them in the A-Frame documentation if you want.
As a child of my camera entity, I've made an entity with the cursor component. This is another component that comes with A-Frame. The cursor component is what lets us actually click on or hover on stuff in the scene, so it's essential for any site that has interactivity in it!
I've made the entity with cursor on it a child of the camera because I want the cursor to be active no matter where the camera is looking in the scene. I checked out the documentation for the cursor component to see the properties I could configure. There's a lot of stuff we haven't learned about yet, but don't sweat it:
For my starter project, I want the cursor to be linked to the mouse so that users on desktop can simply point and click with the mouse to interact with stuff. To do that, I can set the value of the rayOrigin property to "mouse":
cursor="rayOrigin: mouse">
On mobile (non-VR mode), you can just tap on the screen to "click" on something.
Alternatively, you can also link the cursor to an entity by setting rayOrigin: entity if you wanted a visual cursor. This is difficult to explain, but you can see an example on this WebXR site I made. See how there's a tiny circular cursor that moves along with the camera that you can use to click on stuff? That's an entity-based cursor, not a mouse-based cursor. Take a peek at the visual, entity-based cursor in action:
Back to my starter project, though. Why did I want a mouse-based cursor for desktop/mobile? I think they are a bit easier to understand because people are used to simply pointing and clicking with the mouse on desktop or tapping the screen to interact on mobile. There are advantages to an entity-based visual cursor if you want your project to work on devices like Google Cardboard that don't have controllers. If you're making a WebXR project and it's important that it works on Google Cardboard, let me know and I'll help you out.
