react-three-fiber multiple meshes 丢失模型，除了最后一个答案

【问题标题】：react-three-fiber multiple meshes lose models except for last onereact-three-fiber multiple meshes 丢失模型，除了最后一个
【发布时间】：2021-06-12 06:50:51
【问题描述】：

我一直在使用react-three-fiber 在 React 中开发一个应用程序来直观地显示数据。我试图通过将表示其属性的数据作为道具传递给组件来创建不同的模型。我的问题出现在这里，因为在每个组件内部我能够添加一个简单的形状（例如立方体）并让它正确显示，当我在每个组件内声明要使用的模型时，它似乎只被最后一个组件拾取已创建；

顶级组件画布简化

return (
    <div> 
        <Canvas> 
            <Suspense fallback={null}>
                <Items items={this.state.data}/>
            </Suspense>
        </Canvas>
    </div>
)

中层组件

// count is to identify the position in the loop so that the meshes do not overlap 

import React, {Component} from 'react';
import ITEM from './ITEM';

class Items extends Component {
    
    render() {
        return this.props.items.map((item, i) => (
            <ITEM key={i} item={item} count={i}/>
        ));
    }
}

底层组件

// I have been using the drei GLTF loader to get the model

import React, {useRef} from 'react';
import {useFrame} from 'react-three-fiber';
import {useGLTF} from 'drei';

const Model = ({modelPath}) => {
    const gltf = useGLTF(modelPath, true)
    return <primitive object={gltf.scene} dispose={null}/>
};

const ITEM = ({item, count}) => {

    const modelPath = '/model/scene.gltf';

    const mesh = useRef(null);
    useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
    return (
        <mesh castShadow position={[1, 1, 1]} ref={mesh}>
            <Model modelPath={modelPath}/>
        </mesh>
    );
};

【问题讨论】：

标签： javascript reactjs three.js react-three-fiber

【解决方案1】：

使用gltfjsx 将您的 GLTF 模型转换为 react 组件，然后您可以使用 props 编辑它们的某些属性。

【讨论】：

这就是解决方案。在threejs中，您不能在多个地方拥有一个相同的对象。该模型归结为一个 THREE.Scene，然后安装两次。另一方面，GLTFJSX 创建了一个不可变的场景图，现在可以重用该模型。在没有 GLTFJSX 的情况下解决这个问题需要克隆，这会增加 CPU、内存和性能下降。