javascript - react-three-fiber 多重网格丢失模型，除了最后一个

Question

我一直在使用 react-three-fiber 在 React 中开发一个应用程序来可视化显示数据。我正在尝试通过将表示其属性的数据作为 Prop 传递到组件中来创建不同的模型。我的问题出现在这里，因为在每个组件内部我都可以添加一个简单的形状(例如立方体)并使其正确显示，当我在每个组件内部声明一个要使用的模型时，它似乎只被最后一个组件选中创建；

简化了顶级组件 Canvas

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>
    );
};

Answer 1

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