使用相同的GLTF模型两次在反应-三纤维/德瑞/Three.js

Question

在这个最小反应三光纤应用程序中，我尝试加载并包含相同的GLTF型号两次：

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { useGLTF } from "@react-three/drei";

function MyContent() {
  const firstGltf = useGLTF("/eye/scene.gltf");
  const secondGltf = useGLTF("/eye/scene.gltf");

  return (
    <>
      <primitive object={firstGltf.scene} position={[-200, 0, -400]} />
      <primitive object={secondGltf.scene} position={[200, 0, -400]} />
    </>
  );
}

export default function App() {
  return (
    <Canvas>
      <ambientLight color="white" intensity={0.5} />

      <Suspense fallback={null}>
        <MyContent />
      </Suspense>
    </Canvas>
  );
}

看到这个代码沙盒了吗

然而只有第二个

（是不是因为对useGLTF的第二次调用记住了“/eye/scene.gltf”已经加载并返回了同一个对象？这是不是把

特别是，这是我想要实现的：

• 在我的画布上多次使用gltf模型

除此之外，也许你还可以帮我澄清这些问题，让我更好地理解这里到底发生了什么：

• 因为我只想要一个3D模型，这是使用gltf的正确方法吗。场景对象
• 是

非常感谢。




Answer 1

我不是3方面的专家。js，根据我的发现并尝试回答您的问题。

1.即使定义了2个基本体，也只显示一只眼睛

如果使用useGLTF（）导入相同的模型，它将引用相同的对象。因此，2个基元指向同一个gltf，并且只应用了最后/一个配置。

const firstGltf = useGLTF("/eye/scene.gltf");
const secondGltf = useGLTF("/eye/scene.gltf");
const glassesGltf = useGLTF("/glasses/scene.gltf");

// for demonstrating first eye is same as second eye
// Output: false, true
console.log(firstGltf === glassesGltf, firstGltf === secondGltf);

2.是<代码>

是的。但是，如果要在屏幕上多次显示相同的gltf，则需要创建网格并应用模型的几何体和材质，以便可以拥有一个新对象。

function Model(props) {
  const { nodes, materials } = useGLTF("/eye/scene.gltf");
  return (
    <group
      {...props}
      dispose={null}
      rotation={[Math.PI, 0, -Math.PI / 2]}
      scale={[1, 1, 1]}
    >
      <mesh
        geometry={nodes.Sphere001_Eye_0.geometry}
        material={materials.material}
      />
    </group>
  );
}
...
<Model position={[-1, 0, 1]} />
<Model position={[1, 0, 1]} />

这里是代码和演示框

FYR：

您可以使用这个库https://github.com/pmndrs/gltfjsx从模型生成jsx。