How to enable class="cantap" in order to click on a 3D object attaching to wrist?

šŸ§‘ā€šŸ’» Technical Support
2

Hello @Son_Lai there are a couple steps you need to take to include a click event on a 3D model in a hand/wrist tracking experience.

First, you need to add a raycast and cusor to your camera, something like this:

  <a-camera
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;"
    position="0 1.6 0"></a-camera>

Then you need to add the

class="cantap"

to the entity that you want to interact with.

Then you could write a simple component like this to test the logic (app.js)

AFRAME.registerComponent('log-on-tap', {
  init() {
    this.el.addEventListener('click', () => {
      console.log('This was clicked')
    })
  },
})

And make sure to add that to your entity like so

  <a-entity 
    id="model" 
    gltf-model="#your-Model" 
    class="cantap" 
    log-on-tap>
  </a-entity>

then you can change the logic in the custom component to whatever you want. Right nowk, this will register the click and log a message.