Unable render muliple <primitive/> in one page

[ida-fe]

I try to create two canvas in one page, and each of them load same .pcd and render throw <primitive/>，but only one of them run normally，another unable to render graph，demo as follow：

import React, { useState, useCallback, useEffect } from 'react'
import ReactDOM from 'react-dom'
import { Canvas } from '@react-three/fiber'
import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader'

const useLoadPCD = url => {
    const [status, setStatus] = useState('loading');
    const [data, setData] = useState(null);

    const onLoad = useCallback(data => {
        setStatus('success');
        setData(data);
    }, [status]);
    const onProcess = useCallback(processEvent => {
        setStatus('loading');
    }, [status]);
    const onError = useCallback(() => {
        setStatus('error');
    }, [status]);

    useEffect(() => {
        new PCDLoader().load(url, onLoad, onProcess, onError);
    }, [url]);

    return { data, status };
};

const CV = ({
    data = null
}) => {
    const scale = 1;
    const range = 120;
    return (
        <Canvas
            dpr={window.devicePixelRatio}
            alpha={false}
            orthographic
            camera={{
                left: -range * scale,
                right: range * scale,
                top: range,
                bottom: -range,
                near: -range,
                far: 10000,
                zoom: 4,
                up: [0, 0, 1],
                position: [0, 0, 40]
            }}
            style={{
                backgroundColor: '#000',
                width: '200px',
                height: '200px'
            }}>
            {
                data ? <primitive object={data} /> : null
            }

        </Canvas>
    )
}

const App = () => {
    const { data } = useLoadPCD('http://localhost:1234/demo1.pcd')
    console.log(data)

    return (
        <>
            <div>canvas1:</div>
            <CV data={data} />
            <div>canvas2:</div>
            <CV data={data} />
        </>
    )
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

[partynikko]

Not sure how PCD works or is implemented, but a resource/object can only ever be mounted in one place at once. See here: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#putting-already-existing-objects-into-the-scene-graph
To get around this, clone the loaded entity. For example, when loading GLTF scenes that I want to use multiple instances of, I do this:

export const useGltfScene = (model: string) => {
  const gltf = useGLTF(`${process.env.PUBLIC_URL}/models/${model}`);
  const scene = useMemo(() => gltf.scene.clone(), [gltf]); // Clone the scene to be able to use multiple instances.
  return scene;
};

Maybe (hopefully) that will work for PCD as well.

[ida-fe]

effective response! thank you

[drcmda]

this why gltfjsx https://github.com/pmndrs/gltfjsx is so valuable, it creates a virtual graph that can be re-used. primitive is usually an escape hatch, i try to use that as rarely as i can. you can get something like that for pcd as well with the useGraph hook, but then you have to construct the scene manually from the nodes and materials you get. but if you can, using gltf would make it so much easier.

[gong9]

thanks

[AChangXD]

this why gltfjsx https://github.com/pmndrs/gltfjsx is so valuable, it creates a virtual graph that can be re-used. primitive is usually an escape hatch, i try to use that as rarely as i can. you can get something like that for pcd as well with the useGraph hook, but then you have to construct the scene manually from the nodes and materials you get. but if you can, using gltf would make it so much easier.

@drcmda If I'm not mistaken, you have to process the file and create a Model (jsx/tsx) manually with gltfjsx? I dont think it covers the use case where users can upload models (vs already having the models and converted prior to deployment)