Raycast weird intersections

[ThiagoFacchini]

Hello guys, I'm trying to perform a basic ray casting to get some intersections,

On the first glance everything looked fine, but once I dug it deeper, I found the intersection had a weird offset.

On the image above you can see where I clicked, but the results appearing on the console suggests that I clicked in one of the lines geometry which are part of a group.

Down below, the code I'm using (I know it's not the most efficient way to do it, but as of right now it's a POC, so it's 'good enough')

    const RayCaster = (): null => {
        const { raycaster, camera, mouse, scene } = useThree()

        if (pointerState === 1) {
            console.log(mouse)
            raycaster.setFromCamera( mouse, camera )
            const intersects = raycaster.intersectObjects (scene.children, true)
            const intersectable = getIntersectable(intersects)


            if (intersectable !== undefined) {
                console.log(intersectable)
                const posX = Math.floor(intersects[0].point.x)
                const posY = Math.floor(intersects[0].point.y)
                const posZ = Math.floor(intersects[0].point.z)

                console.log(`x: ${posX}, y: ${posY}, z: ${posZ}`)
            } else {
                console.log('no intersects')
            }

        }
        return null
    }

And finally the function which returns the objects I'm looking for:

    function getIntersectable (entities: Object): ?Object {
        console.log(entities)
        for (let i = 0; i < entities.length; i++) {
            if (entities[i].object.parent && entities[i].object.parent.userData.intersectable == true) {
                return entities[i]
            }
        }
    }

I'm suspecting on the mouse coordinates I'm getting from useThree() hook, but I'm not sure....

Any advice here?

[drcmda]

the raycaster has a line threshold that you need to set, it's dependent on your fov and camera position. the default is 1 which could mean anything, in your case it positively hits that line. make it smaller and it won't. that's all just threejs doing its thing: https://threejs.org/docs/index.html?q=ray#api/en/core/Raycaster.params

you can set these props directly on the canvas as a shortcut:

<Canvas raycaster={{ params: { Line: { threshold: 0.1 } } }}

btw i hope that's not how you raycast ... you should be doing:

<mesh onPointerOver={e => ...}
<lineSegments onClick={e => ...}

that is way more comfortable but also more efficient since its only hitting the objects that have handlers on them.

[ThiagoFacchini]

@drcmda thanks for your reply.

I setup my canvas as per your example and I'm getting an error:

Also, in relation of how to raycast, could you elaborate more? I think I got it, but I want to be sure.

Really appreciate the help.

[drcmda]

looks like you need the others aswell, points, lines, etc. i guess i can make this easier and pluck out params and spread it.

for now just use onCreated and write the threshold into the raycaster.

the props are defined here_: https://threejs.org/docs/index.html?q=rayc#api/en/core/Raycaster

as for event handling:

https://docs.pmnd.rs/react-three-fiber/getting-started/events-and-interaction
https://docs.pmnd.rs/react-three-fiber/API/events