Cant get raycasting intersection to work

Questions
1

Hey Guys!

So I am trying to build on a project based on an older version of threejs. The object intersection is no longer working with newer versions. This is the code being used to try an get the intersecting object however the intersects array is always empty. The raycasting works on the sphere object just not on the instanced objects.

    if (!pointer || !onCanvas) return
    state.raycaster.setFromCamera(pointer, state.camera)
    const instancedMesh = state.scene.getObjectByName("objects")
    const sphereMesh = state.scene.getObjectByName("sphere")

    const intersects = state.raycaster.intersectObject(instancedMesh!)
    const sphereIntersects = state.raycaster.intersectObject(sphereMesh!)

    const firstIntersection = intersects[0]

    if (intersects.length && (!earthIntersects.length || firstIntersection.distance < sphereIntersects[0]?.distance)) {
      console.log('Intersected')
      const item = items[firstIntersection.instanceId!]
    }

Any help would be amazing! Thank you in advance!

2

I tried intersection with instanced mesh with Three.js r155 and it works fine. Here is my test:
https://codepen.io/boytchev/full/poQYywr

Your code does not rely only on pure instanced mesh intersection, but also on earthIntersects and firstIntersection. Are you absolutely sure the problem is with the instansed intersection, and not in the code or in the data in the variables?

PS 1: I’m not sure what does postfix ‘!’ do. Is it some extension to JS?

PS 2: Here is some additional info
3

Sorry, changed some of the variables when typing out code and forgot to change some. Here is a full code sandbox of the Scene with the issue: hopeful-flower-cgpnj7 - CodeSandbox

Also answers to PS, the ! is a Typescript operator to essentially tell it that the variable wont ever be null. Essentially an override.

4

Ah, that too much of unfamiliar code for me, besides, CodeSandbox does not allow me to modify the code and run it.

It is better for someone with R3F and TS experience to dive in.

It might be so that the issue is not with the raycaster itself, but with some of the abstraction layers on top of Three.js. Or the problem might be with the data. For example, I was unable to see the console.log made by the onPointerOver in Satellites.tsx:122. My guts say that something else is going on and it prevents the raycaster from doing its job.

I’m sorry for not being able to give any meaningful advice.

5

No worries! Appreciate you trying. And yes that is also part of the problem, im not sure why the onPointerOver wont work either. Have a feeling the overall issue is related. Not sure if the object position isnt being updated properly or what.