Raycaster does not detect click on GltfModel

[oneWaveAdrian]

Great library!

When I use Raycaster it does not detect clicks on loaded Gltf-Models.
When I activate the option intersectRecursive and then console log the click event, the intersectObjects list only contains meshes with a direct parent of scene and no loaded models.
Is there a hidden attribute that has to be set in the Gltf-Model loading process?

[oneWaveAdrian]

Did nobody encounter this before...?

[klevron]

Hi, thanks, did you try with raycaster component ?
https://troisjs.github.io/guide/meshes/events.html#raycaster-component

[oneWaveAdrian]

Jup, here is a minimal reproducible example: https://glitch.com/edit/#!/apricot-neighborly-century

After glancing over the raycaster code I assume that gltf models are not added to the list of intersect objects upon load. Is there a way to do it manually?

[oneWaveAdrian]

I attempted to fix this. @klevron can you verify that this is correct? I don't have a local trois instance yet and purely did this by comparing the process on mesh.ts

[klevron]

Thanks for your PR, I will handle this asap because there's another problem : raycaster component don't work with gltf because it's a group (not a mesh) and intersectObjects is not updated when model is loaded

[oneWaveAdrian]

Hey @klevron, this issue is currently blocking a project of mine - is there any way I can support you to get this working faster?

[klevron]

Hi, sorry, will handle this tomorrow

[klevron]

This should work with 0.3.2, you can use :

<Renderer :pointer="{ intersectRecursive: true }">
  <Camera :position="{ z: 1 }" />
  <Scene>
    <GltfModel @click="onClick" src="..." />
  </Scene>
</Renderer>

Or :

<Renderer>
  <Camera :position="{ z: 1 }" />
  <Scene>
    <Raycaster intersect-recursive @click="onClick" />
    <GltfModel src="..." />
  </Scene>
</Renderer>

[oneWaveAdrian]

@klevron I updated the glitch from above. Running into another issue now.

In the glitch the click function for box fires twice, when I click once, while the gltf model behaves normal (see screenshot).

In my other project it behaves exactly the other way around. GLTF fires twice.

[klevron]

You should use :

<renderer ref="renderer" antialias orbit-ctrl resize="window" :pointer="{ intersectRecursive: true }">
  <camera :position="{ z: 10 }"></camera>
  <scene>
    <point-light :position="{ y: 50, z: 50 }"></point-light>
    <box
      ref="box"
      :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }"
      @click="gotClicked('Box')"
      :position="{x: 1}"
    >
      <lambert-material></lambert-material>
    </box>
    <gltf-model
      ref="mars"
      src="https://cdn.glitch.com/7196f70c-5654-466a-aa15-c2d49cf73ffc%2Fmars.glb?v=1622584963291"
      :position="{x: -1}"
      @click="gotClicked('Snickers')"
    />
  </scene>
</renderer>

You don't need to use Raycaster component

[oneWaveAdrian]

@klevron thanks!
For documentation purposes, when should raycaster be used and when is it sufficient to use pointer ?
I will happily write the article for this later, just want to be sure I'll get it right

[klevron]

You can use Raycaster if you need to raycast all objects (scene.children), the events props has to be set on Raycaster component : <Raycaster @click="onClick" />