从加载了useGLTF的GLB文件克隆节点在反应三光纤?

Question

我像这样用useGLTF加载我的模型，并访问它的节点，因为我需要操作它们:

const { nodes, materials } = useGLTF("/model.glb");
<group>
<primitive object={nodes.RootNode} />
<skinnedMesh
// @ts-ignore
geometry={nodes.outfit1.geometry}
// @ts-ignore
material={nodes.outfit4.material}
// @ts-ignore
skeleton={nodes.outfit4.skeleton}
/>
<skinnedMesh
// @ts-ignore
geometry={nodes.haircut.geometry}
// @ts-ignore
material={nodes.haircut.material}
// @ts-ignore
skeleton={nodes.haircut.skeleton}
/>
</group>

现在我想重用这个组件，但我知道你必须克隆这个模型才能在你的场景中多次使用它;正如这里提到的，您可以使用drei中的Clone组件，但是. Clone只在场景中工作。我该如何处理?

import { Clone, useGLTF } from '@react-three/drei';
export const Model = () => {
const model = useGLTF('LKGLB.glb');
return (
<>
<Clone object={model.scene} scale={0.35} position-x={-4} />
<Clone object={model.scene} scale={0.35} position-x={0} />
<Clone object={model.scene} scale={0.35} position-x={4} />
</>
);
}

或在现场使用.clone():

const { scene } = useLoader(GLTFLoader, url)
const copiedScene = useMemo(() => scene.clone(), [scene])
return (
<group>
<primitive object={copiedScene} position={position} />
</group>
);

当我想使用节点时如何做到这一点?

Answer 1

您可以使用react-three-fiber中的useGraph来获取节点。对于蒙皮的网格，你可以使用Three的骷髅utils的克隆功能。

import { SkeletonUtils } from "three-stdlib"
import { useGraph } from '@react-three/fiber'
const scene = useLoader(OBJLoader, url)
const clone = useMemo(() => SkeletonUtils.clone(scene), [scene])
const { nodes } = useGraph(clone)

下面是react-three-fiber文档中的一个示例，其中使用了该方法。

您也可以使用useGLTF来获得场景:

const { scene } = useGLTF(url)