R3F drei Clone does not update its world position

Questions
1

hi there.

here is similar issue of mine. issue

so I can’t use pmndrs/gltfjsx.

const gltf = useGLTF(canvasItem.src);
return <Clone
          position={[
            canvasItem.position.x,
            canvasItem.position.y,
            canvasItem.position.z,
          ]}
          key={canvasItem.id}
          object={gltf.scene}
          scale={scale}
          deep
        />

I render gltf with this way.

first problem, cloned object not trigger any raycasting event like mouse hover, click, etc.
so I create transparent box.

  <mesh
    position={[
      canvasItem.position.x,
      canvasItem.position.y,
      canvasItem.position.z,
    ]}
  >
    <Clone key={canvasItem.id} object={gltf.scene} scale={scale} deep />
    <mesh name={canvasItem.id} position={scaledCenter}>
      <boxGeometry
        args={[
          canvasItem.dimension.x,
          canvasItem.dimension.y,
          canvasItem.dimension.z,
        ]}
      />
      <meshBasicMaterial opacity={0} transparent />
      <Edges
        visible={selected}
        scale={1.1}
        color={'red'}
        renderOrder={1000}
      />
    </mesh>
  </mesh>

second problem, after update position, box position is updated but cloned object is not update.

screenshot
screenshot718×463 64.1 KB

I have tried set matrixWorldNeedsUpdate, matrixWorldAutoUpdate or
call updateMatrix, updateMatirxWorld, updateWorldMatirx in useEffect but nothing is worked.

here is my full code.
how can I update cloned object real position?

import { SrcCanvasItemType } from '@/entities/twin';
import { useMemo } from 'react';
import { Box3, Vector3 } from 'three';
import { useGLTF, Clone, Edges, useSelect } from '@react-three/drei';
export const SrcEntity = ({
  canvasItem,
}: {
  canvasItem: SrcCanvasItemType;
}) => {
  const gltf = useGLTF(canvasItem.src);
  const box = useMemo(() => new Box3().setFromObject(gltf.scene), [gltf]);
  const size = useMemo(() => box.getSize(new Vector3()), [box]);
  const center = useMemo(() => {
    return box.getCenter(new Vector3());
  }, [box]);
  const scale = useMemo<[number, number, number]>(
    () => [
      canvasItem.dimension.x / size.x,
      canvasItem.dimension.z / size.y,
      canvasItem.dimension.y / size.z,
    ],
    [canvasItem, size]
  );
  const scaledCenter = useMemo<[number, number, number]>(
    () => [center.x * scale[0], center.y * scale[1], center.z * scale[2]],
    [center, scale]
  );
  const selected = !!useSelect().find((s) => s.name === canvasItem.id);
  return (
    <>
      <mesh
        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}>
          <boxGeometry
            args={[
              canvasItem.dimension.x,
              canvasItem.dimension.y,
              canvasItem.dimension.z,
            ]}
          />
          <meshBasicMaterial opacity={0} transparent />
          <Edges
            visible={selected}
            scale={1.1}
            color={'red'}
            renderOrder={1000}
          />
        </mesh>
      </mesh>
    </>
  );
};
emphasized text
2
  1. Pointer events: The <Clone> component by default won’t trigger raycasting. You can wrap it in an interactive <mesh> or assign a custom raycast function to make it clickable.
  2. Position not updating: Because you’re nesting <Clone> inside a parent <mesh>, the parent’s transform must re-render for <Clone> to move. In React Three Fiber, ensure you’re passing new props (position/scale/rotation) so it re-renders.
  3. Avoid stale bounding-box memos: You’re using useMemo for the box and center. If you change canvasItem.position or canvasItem.dimension but not the memo dependencies, the bounding box won’t recalc. Remove or properly list dependencies so it updates on every relevant change.
  4. Simple approach: Pass your position, rotation, and scale directly to <Clone> (e.g. <Clone object={gltf.scene} position={...} scale={...} rotation={...} />). For a hover/click area, you can use a transparent geometry or directly enable pointer events on the cloned geometry by assigning onPointerOver, etc.