How to bind events on <primitive>

[xiaopohaier]

I try to bind click event on ，but not work，demo as follow：

<primitive object={cube}  onClick={(...args) => { console.log(...args) }} />

[drcmda]

looks like a bug. it does work when i try it, but when the canvas unmounts and remounts it doesn't.

[joshuaellis]

#1164

[drcmda]

it's fixed.

[xiaopohaier]

I update to @react-three/fiber@6.0.8 and try to run demo as follow：

import React, { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom'
import * as THREE from 'three'
import { Canvas, useThree, useFrame, extend } from '@react-three/fiber'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
extend({ OrbitControls });

const getCube = () => {
    const geometry = new THREE.BoxBufferGeometry(3, 3, 3)
    const materials = [];
    for (let j = 0; j < 6; j++) {
        materials.push(new THREE.MeshBasicMaterial({
            transparent: true,
            opacity: j === 0 ? 0.2 : 0.8,
            color: 0xC71585,
            side: THREE.DoubleSide
        }));
    }
    const mesh = new THREE.Mesh(geometry, materials);

    // edge
    const edge = new THREE.LineSegments(
        new THREE.EdgesGeometry(mesh.geometry),
        new THREE.LineBasicMaterial({ color: 0xC71585, linewidth: 1 })
    );

    // line
    const line = new THREE.Mesh(
        new THREE.BoxBufferGeometry(2, 0.1, 0.1),
        new THREE.MeshBasicMaterial({ color: 0xC71585 })
    );
    line.position.x = 2.5;

    mesh.add(edge)
    mesh.add(line)
    return mesh
}

const Controls = () => {
    const controls = useRef();
    const { camera, gl } = useThree();
    useFrame(() => {
        controls.current.update();
    });
    useEffect(() => {
        controls.current.addEventListener('change', () => { });
    }, [controls.current]);
    return (
        <orbitControls
            ref={controls}
            args={[camera, gl.domElement]} />
    )
};


const App = () => {
    const cube = getCube()
    return (
        <Canvas>
            <Controls />
            <primitive
                object={cube}
                onClick={() => { console.log('click!') }} />
        </Canvas>
    )
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

When I click once, the event trigger many times，How can I solve it？

[drcmda]

i'll look into it. but the problem aside, this is all broken and anti-react. you are re-creating the full geometry every time the component renders. all of it should be declarative, or at least memoized. in react you can't have side-effects in the render function. a side effect is anything that has outside effects or has "new ..." in it. that is not something you should ignore, everything you build on this stuff will come collapsing down. that would be the same for react-dom.

[drcmda]

as for the multiple clicks, it seems fine. if you inspect the event what you're getting are three raycast hits: a mesh and two lines. lines need a threshold in threejs, it depends on how big the geometry is. in your case you must adjust it to the size of your size and the problem goes away.

for instance:

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

it will still fire multiple times if you pierce multiple objects, for that there's event.stopPropagation() which allows you to pick the nearest to the camera hit.