Understanding Clone Component Issues in React Three Fiber

Your issue with the Clone component in React Three Fiber appears to be related to how cloned objects handle matrix updates and raycasting. Based on the information available, I can provide some insights and potential solutions.

The Core Issues

1. Raycasting not working on cloned objects: This is a common issue with cloned objects in Three.js.
2. Position updates not reflecting in the cloned object's world position: This could be related to how the Clone component handles matrix updates.

Understanding the Clone Component

The Clone component in drei is likely using the SkeletonUtils.clone() method under the hood, which is designed to properly clone objects with skeletal animations. According to the documentation:

Clones the given object and its descendants, ensuring that any SkinnedMesh instances are correctly associated with their bones. Bones are also cloned, and must be descendants of the object passed to this method. Other data, like geometries and materials, are reused by reference.

Potential Solutions

1. Use a Reference to Update the Clone

Try using a ref to access the cloned object and manually update its matrix:

JAVASCRIPTCopied
const cloneRef = useRef();

useEffect(() => {
  if (cloneRef.current) {
    cloneRef.current.position.set(
      canvasItem.position.x,
      canvasItem.position.y,
      canvasItem.position.z
    );
    cloneRef.current.updateMatrix();
    cloneRef.current.updateMatrixWorld(true);
  }
}, [canvasItem.position]);

return (
  <mesh
    position={[
      canvasItem.position.x,
      canvasItem.position.y,
      canvasItem.position.z,
    ]}
    rotation={[
      canvasItem.rotation.x,
      canvasItem.rotation.y,
      canvasItem.rotation.z,
    ]}
  >
    <Clone 
      ref={cloneRef}
      key={canvasItem.id} 
      object={gltf.scene} 
      scale={scale} 
      deep 
    />
    {/* Rest of your code */}
  </mesh>
);

2. Use a Group to Manage Position

Instead of trying to position the Clone directly, wrap it in a group and position the group:

JAVASCRIPTCopied
return (
  <group
    position={[
      canvasItem.position.x,
      canvasItem.position.y,
      canvasItem.position.z,
    ]}
    rotation={[
      canvasItem.rotation.x,
      canvasItem.rotation.y,
      canvasItem.rotation.z,
    ]}
  >
    <Clone 
      key={canvasItem.id} 
      object={gltf.scene} 
      scale={scale} 
      deep 
    />
    <mesh name={canvasItem.id} position={scaledCenter}>
      {/* Transparent box for raycasting */}
    </mesh>
  </group>
);

3. Manual Cloning with SkeletonUtils

If the drei Clone component isn't working as expected, you could try manually cloning the object using SkeletonUtils directly:

JAVASCRIPTCopied
import { useEffect, useMemo, useRef } from 'react';
import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';

const SrcEntity = ({ canvasItem }) => {
  const gltf = useGLTF(canvasItem.src);
  const clonedScene = useMemo(() => SkeletonUtils.clone(gltf.scene), [gltf]);
  const objectRef = useRef();
  
  useEffect(() => {
    if (objectRef.current) {
      objectRef.current.position.set(
        canvasItem.position.x,
        canvasItem.position.y,
        canvasItem.position.z
      );
      objectRef.current.scale.set(scale[0], scale[1], scale[2]);
      objectRef.current.updateMatrix();
      objectRef.current.updateMatrixWorld(true);
    }
  }, [canvasItem.position, scale]);
  
  return (
    <>
      <primitive ref={objectRef} object={clonedScene} />
      <mesh 
        name={canvasItem.id}
        position={[
          canvasItem.position.x + scaledCenter[0],
          canvasItem.position.y + scaledCenter[1],
          canvasItem.position.z + scaledCenter[2],
        ]}
      >
        {/* Transparent box for raycasting */}
      </mesh>
    </>
  );
};

Regarding Raycasting

For the raycasting issue, your approach of using a transparent box is a valid workaround. However, you might also want to try:

1. Setting raycast={null} on the Clone component to prevent it from interfering with raycasting
2. Using the userData property to store the ID for identification during raycasting
3. Ensuring the transparent box has a higher renderOrder than the cloned object

I hope these suggestions help you resolve the issues with your cloned objects. Let me know if you need further clarification on any of these approaches.