React Three Fiber中Morph Targets与蒙皮网格的使用疑问

问题背景 #

我想基于Three.js的蒙皮与变形目标示例，在React Three Fiber场景中添加带Blend Shapes的对象，通过influences控制变形效果，后续还计划实现带骨骼绑定的动画，但不知道如何不使用<primitive>组件将对象添加到场景中。

已尝试的方案及问题 #

• 尝试使用<primitive>组件直接引入：

  <primitive ref={ref} object={nodes.cube_morph} />
  

• 参考相关方案手动构建mesh，代码如下：

  <mesh ref={ref} geometry={nodes['cube_morph'].geometry}>
    <meshStandardMaterial
      attach="material"
      morphTargets={true}
      color={new THREE.Color('white')}
    />
  </mesh>
  

  但运行时出现错误：Cannot read properties of undefined (reading 'length')

  注：测试用的立方体包含2个Blend Shapes：up-morph、right-morph，暂未添加骨骼绑定。

补充发现 #

后来我发现可以通过场景对象直接访问并控制morph target influences，代码示例如下：

const { nodes, scene, materials } = useGLTF('/cube_morph.glb')

const influencer = useRef(0)

useFrame(() => {
  scene.children[0].morphTargetInfluences[0] = influencer.current

  if (influencer.current + 0.01 < 1) {
    influencer.current += 0.01
  } else {
    influencer.current = 0
  }
})

useLayoutEffect(() => {
  applyProps(materials['Material.001'], {
    color: 'white'
    // emissive: "white"
  })
})

return <primitive object={scene} {...props} />

疑问 #

是否可以像Three.js的官方示例那样，同时使用蒙皮网格（Skinned Mesh）和变形目标？

内容的提问来源于stack exchange，提问作者DonkeyLuck0