Mesh onClick only work near the origin of Canvas

[Draco112358]

Good evening!
It's happened something weird with my app. I've a Canvas component that render all the elements, that is:

export const MyCanvas: React.FC<MyCanvasProps> = () => {
    const components = useSelector(componentseSelector);
    const orbit = useRef(null);
    const keySelectedComponent = useSelector(keySelectedComponenteSelector)

    return (
        <div id="canvas-container" style={{height: "95vh",backgroundImage: "linear-gradient(to top, #b9b9b9, #ffffff)"}}>
            <ReactReduxContext.Consumer>
                {({store}) => (
                    <>
                        <Canvas id="myCanvas" style={{width: "100%", height: "100%"}}
                                camera={{position: [0, 50, 0], fov: 20, far: 1000, near: 0.1}}>
                            <Provider store={store}>
                                <pointLight position={[100, 100, 100]} intensity={0.8} />
                                <hemisphereLight color="#ffffff" groundColor={new THREE.Color("#b9b9b9")} position={[-7, 25, 13]} intensity={0.85} />
                                {components.map((component) => {
                                    return <FactoryComponent key={component.keyComponent} entity={component} orbit={orbit}/>
                                })}
                                <gridHelper args={[15,20,"#434141", "#434141"]} scale={[2.88, 1, 1.6]} />
                                <Controls orbit={orbit} keySelectedComponent={keySelectedComponent} components={components}/>

                            </Provider>
                        </Canvas>
                    </>
                )}
            </ReactReduxContext.Consumer>
        </div>
    )
}

const Controls: FC<{orbit: MutableRefObject<null>, keySelectedComponent: number, components: ComponentEntity[]}> = ({orbit, keySelectedComponent, components}) => {
    const {scene} = useThree()
    const transformation = useRef(null);
    useTransformations(transformation, orbit)
    return(
        <>
            <TransformControls
                ref={transformation}
                children={<></>}
                object={scene.getObjectByName(keySelectedComponent.toString())}
                showX={(keySelectedComponent !== 0)}
                showY={(keySelectedComponent !== 0)}
                showZ={(keySelectedComponent !== 0)}
            />
            <OrbitControls ref={orbit} addEventListener={undefined} hasEventListener={undefined}
                           removeEventListener={undefined} dispatchEvent={undefined} makeDefault/>
        </>
    )
}

where the Factory component return a mesh like this:

<>
            <mesh ref={meshRef} name={keyComponent.toString()} position={position} rotation={rotation} scale={scale}
                  onClick={(e) => {
                      e.stopPropagation()
                      dispatch(selectComponent(keyComponent))
                  }}
                  onContextMenu={(e) => {
                      e.stopPropagation()
                      let index = (getIndexTransformationByName(activeTransformation.type, toolbarTransformation) + 1) % toolbarTransformation.transformation.length
                      dispatch(setTransformationActive(toolbarTransformation.transformation[index].type))
                  }}
            >
                {children}
            </mesh>
            {(keyComponent === canvas.selectedComponentKey) &&
            <DetectCollision entity={findComponentByKey(canvas.components, keyComponent)}/>}
        </>

in which {children} is a Geometry plus a Material.

Now, the onClick event on the mesh seems working only near the origin, if I move the mesh around in the canvas it won't work anymore. When I put the mesh back in the origin or near it, then the event resumes working.
Any ideas how and why this could happen?

Thanks!

[drcmda]

make a super reduced codesandbox. the code above, it's impossible to say. most likely it's css. when you forget to declare certain areas absolute/relative, grids etc. or you have html elements on top that swallow the events.

[Draco112358]

Good evening! I've made a codesandbox that represent the problem! If you create a component, you can try for example the right click that function only near the origin, if you move the object it won't work anymore. Same thing for the click to select an object. Mesh events only work near the origin. This is the link: https://codesandbox.io/s/three-fiber-prova-fpsps
Hope you could help me, thanks!

[Draco112358]

Any ideas?

[Draco112358]

I've found the problem. I had been using the clone() function to create a copy of the mesh and then compute the bounding box with the applyMatrix4 on this copy, but it turned out that the clone() function does not copy also geometry and material. So I've created a new mesh instead of a clone and then I've passed to it a clone of the existing geometry and material. Now, compute the bounding box on a real copy of the geometry does not affect the original one and the onClick on the original mesh keeps working.