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
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