如何使用形状键将 glb 模型从 Blender 导入到 ThreeJS/react- Three-Fiber 中？

Question

TLDR；当导出的模型具有多个形状键时，将 glb 模型从 Blender 导入到我的反应三纤维应用程序中会出现以下错误：

TypeError: Cannot read properties of undefined (reading 'length')

---

总结 如果我导出没有形状键或仅使用“基础”形状键的模型，则模型在 r3f 中加载正常，但当我使用第二个形状键导出时，模型就会中断。我想知道导出之前是否需要在 Blender 中执行某些操作，或者导入 r3f 后需要执行哪些操作。

仅供参考，我想要导出具有多个形状键的对象的原因是这样我可以为网格的形状设置动画。因此，如果 Shape Key 方法在 ThreeJS 中不可行，任何替代建议也将不胜感激！

---

采取的步骤

1. 使用立方体网格创建一个新的 Blender 文件
2. 向立方体添加两个形状键
3. 将多维数据集导出为 .glb
4. 使用

   npx gltfjsx cube.glb

将 glb 转换为 jsx
5. 生成以下组件，并中断

import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei";

export const Cube = (props) => {
  const { nodes, materials } = useGLTF("/cube.glb");
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.Cube.geometry} material={nodes.Cube.material} />
    </group>
  );
};

useGLTF.preload("/cube.glb");

TypeError: Cannot read properties of undefined (reading 'length')

---

我尝试导出相同的 glb 文件，但没有形状键，并且加载正确。 我还尝试注释掉

<mesh geometry={nodes.Cube.geometry}... />

组件，所以我相信立方体的几何形状出了问题。

感谢大家花时间阅读本文。

Answer 1

您可以专门添加

morphTargetDictionary

和

morphTargetInfluences

<mesh
   geometry={nodes.Cube.geometry}
   morphTargetDictionary={nodes.Cube.morphTargetDictionary}
   morphTargetInfluences={nodes.Cube.morphTargetInfluences}
/>

或者只提供初始参数，它会为您添加

<mesh args={[nodes.Cube.geometry]} />