Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Add and interact with objects on the screen.

How does it work

It uses a-obj-model to load the OBJ formatted objects in the scene. It uses a-frame asset management system for better performance.

Once the objects are loaded, then it uses a-frame cursor to add a cursor to the scene. The cursor component is built on top of raycaster component, which in turn is mapped to three.js raycaster.

You can visualise it as a ray that is emitted our perpendicular to the camera. Once this ray intersects with something on the scene, we can perform our action based on it. a-frame emits events based on what happens with the cursor.

In our project, we're listening on the click event on the object to animate and play the sound associated with it.

Adding animations and interactivity with a-frame is straightforward. We use a-animation for adding the animations to our object. For associating the animations with the object, we can declaratively add it to HTML.

For example, in the following code, we add animations to the bear object by adding the a-animation tag inside the a-obj-model.

<a-obj-model sound="on:click; src:#bear-sound;" cursor-listener src="#bear" mtl="#bear-mtl" scale="0.6 0.6 0.6" rotation="0 12.88 0" position="-0.167 1.45 -5.37">
  <a-animation begin="click" attribute="rotation" from="0 12.88 0" to="0 372.88 0" end="mouseleave" repeat="indefinite" dur="10000"></a-animation>

Using the attributes of the component, we can set when to begin the animation, when to end it, what to animate and so on. In the above example, we've set the animation to start with the event click and end with mouseleave event.

We also use the built in sound component to play the sound when the object is clicked using the cursor.