0

I currently have a r3f problem in which I am loading to canvas instances and expecting my model to render on both canvases but it only appears to be rendering on the last loaded canvas. Any idea's what could be happening?

Scene code: This effectively sets the scene for a model to be loaded into

  <Stage
        intensity={1}
        shadows={false}
        environment={{
          files:
            "https://raw.githubusercontent.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/potsdamer_platz_1k.hdr",
        }}
      >
        {object ? (
          <Model
            object={object}
            boundsSize={(size) => setObjectBoundsSize(size)}
          />
        ) : (
          <Box position={[10, 10, 10]} scale={1}>
            <meshBasicMaterial visible={true} color="red" />
          </Box>
        )}

        {objectBoundsSize !== null && (
          <Bounds damping={0} observe>
            <BoundingBox boundsSize={objectBoundsSize} />
          </Bounds>
        )}
      </Stage>

Model code: This takes in a GLTF model and renders it to the canvas

export const Model = ({ object, boundsSize }) => {
  const model = useGLTF(object.source);
  const bounds = useBounds();
  const modelRef = useRef(null);

  useEffect(() => {
    console.log(model.scene);
    boundsSize({
      size: new THREE.Vector3(
        bounds.getSize().size.x,
        bounds.getSize().size.y,
        bounds.getSize().size.z
      ),
      center: new THREE.Vector3(
        bounds.getSize().center.x,
        bounds.getSize().center.y,
        bounds.getSize().center.z
      ),
    });
  }, [modelRef.current]);

  return (
    <>
      <group ref={modelRef} position={[0, 0, 0]} dispose={null}>
        <primitive position={[0, 0, 0]} object={model.scene} dispose={null} />
      </group>
    </>
  );
};

Attached below is a screenshot of the output of my two canvases

output from my two canvases

Edit: I'm loading this GLTF resource via a static URL not a local asset.

Expectation: I'm expecting too see my two canvases render out the same GLTF model

Ben Swindells
  • 269
  • 3
  • 12
  • 1
    Instead of putting `model.scene` in the ``, call `model.scene.clone()` and see if that fixes the issue on the second canvas. I think it's something to do with a reference issue. – Enijar Aug 14 '23 at 15:25
  • It seems using primitives was the issue, I've opted to loop over the mesh of my object and assign them into one big group which then (very strangely) works over multiple canvases. – Ben Swindells Aug 16 '23 at 14:04

0 Answers0