正确销毁3D对象（React Three Fiber），包括其网格、动画和所有内容

Question

如何销毁整个三维对象，包括其动画和所有内容？

我有一个glb文件（使用Blender创建并导出为gltf 2.0格式）

然后我将它与React一起使用（以及React Three Fiber）。

const { scene, nodes, materials, animations } = useGLTF('/studio.glb');

我也开始了一个动画，代码是：

const Office = (props) => {
    const { scene, nodes, materials, animations } = useGLTF('/studio.glb');
    let mixer = new THREE.AnimationMixer(scene); // <-- other object
    animations.forEach((clip) => {
        const action = mixer.clipAction(clip);
        action.play();
    });
    useFrame((state, delta) => {
        mixer.update(delta);
    });
    const group = useRef();
    useThree(({ camera }) => {
        camera.position.set(xPos, yPos, 7);
        camera.rotation.set(0.1, -0.75, 0.08);
        camera.fov = 35;
        camera.updateProjectionMatrix();
    });
    return (
        <group ref={group} dispose={null}>
            <group rotation={[ Math.PI / 2, 0, 0 ]} scale={[ 0.01, 0.01, 0.01 ]}>
                <group name="Character">
                    <primitive object={nodes.pasted__Hips} />
                    <skinnedMesh
                        geometry={nodes.pasted__MocapGuy_Caruncula.geometry}
                    ... 
                    ... 
                    ...
}

我使用了React Three Fiber文档中的https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models，并使用https://gltf.pmnd.rs/解构了整个glb文件。

（我也可以使用...）

return <primitive object={scene} />

但是我以后需要通过代码更改一些网格。

我要怎样摧毁它们？

我找到了很多相关的参考资料，几乎所有的都使用类似于...的东西。

scene.remove( selectedObject );

问题是在我的代码中，我有几个对象，不仅仅是场景，我不确定在我的情况下它是否能正常工作。

我想能够销毁和处理所有这些对象，以便在需要时重新创建它们。

我需要这样做的原因是，当使用React Router切换到其他页面并返回到该页面时，它会重新创建所有内容，并且以前的对象仍然留在内存中。

我尝试将它们序列化以存储它们，但序列化使整个过程变得太慢了。

如何销毁所有东西？

Rafael

- Rafael

---

你可以尝试使用Android Studio/Xcode中的内存分析工具来观察场景的加载和卸载过程，这将告诉你是否有残留在内存中的内容。 - Abe

Answer 1

根据 https://discoverthreejs.com/tips-and-tricks/ 中的“处理物体”一文：

首先，如果您稍后会再次添加该对象，请考虑不要删除它。您可以使用object.visible = false（对于灯光也适用），或者material.opacity = 0来暂时隐藏对象。您可以设置light.intensity = 0以禁用光源而无需导致着色器重新编译。

根据https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls中的内容：

我将尝试更改状态上的某些属性，但确保它不会传播到react three fiber。

- Roberto

Answer 2

你应该在React中进行条件渲染，将一个React组件放在你的 <Canvas> 元素中，这样它会调用 scene.add 将组件的内容添加到场景中，在你从 <Canvas> 组件卸载时，scene.remove 会被调用。

尽管如此，它仍然会留在浏览器缓存中，当其他东西被添加到缓存并达到其限制时，它将被覆盖。

在此处阅读更多关于条件渲染的信息：https://reactjs.org/docs/conditional-rendering.html

- Epiczzor