R3F-click on line

Questions
1

Hi,

In React Three Fiber, I am trying to get the line object upon click, and it is not working for me.
Here is the code. It does not work by adjusting line.threshold

import { Line } from ‘@react-three/drei’
import { useThree } from ‘@react-three/fiber’
import React, { useEffect } from ‘react’
import { Vector2, Vector3 } from ‘three’
import { OrbitControls } from ‘three/examples/jsm/Addons.js’

const Interaction = () => {

const { camera, scene, raycaster, gl, size } = useThree()
raycaster.params.Line.threshold = 0.1

useEffect(() => {

    new OrbitControls(camera, gl.domElement)

    const onMouseDown = (e) => {
        e.stopPropagation();

        const x = (e.clientX / size.width) * 2 - 1;
        const y = -(e.clientY / size.height) * 2 + 1;

        const mouse = new Vector2(x, y)

        raycaster.setFromCamera(mouse, camera);

        const objs = raycaster
            .intersectObjects(scene.children)
            .map((e) => e.object);

        if (objs.length > 0) {
            // selection.onSelect(objs);
        }
        //intersecting objects always empty
        console.log(objs);
    };

    gl.domElement.addEventListener("mousedown", onMouseDown);

    return () => {
        gl.domElement.removeEventListener("mousedown", onMouseDown);
    };

}, [])

return (
    <>
        <Line points={[new Vector3(3, 3, 3), new Vector3(1, 1, 1)]} color='pink' lineWidth={2} onClick={(e) => {
            console.log(e)
            //this does not work  it sometimes detects intersection when click happend on certain region of line like end of line
        }} />
    </>
)

}

export default Interaction

ps. also if i simply use three library without r3f clicking on line works.

What am I missing?

Any help is appreciated.

2

you don’t need any of this code. pointer events are inbuilt.

<line onClick={...} />

the threshold will affect r3f as well as your own code, so just set the raycaster threshold

<Canvas raycaster={{ params: { Line: { threshold: 10 } } }}>

or

const raycaster = useThree(state => state.raycaster)
...
raycaster.params.Line. threshold = 10

also orbitcontrols, why

import { OrbitControls } from '@react-three/drei'

...
<OrbitControls />