React Three Fiber Morph Targets with Skinned mesh

Question

Basing on three.js example https://threejs.org/examples/#webgl_animation_skinning_morph I wanted to add to the scene object with blend shapes and have control over it through the influencers (in later stages I would like to have animation with armature as well) but I can't figure out how to add it to the scene without primitive component.

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

When I'm trying approach like was discussed here https://github.com/pmndrs/react-three-fiber/issues/309

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

I receive an error Cannot read properties of undefined (reading 'length') link to the code sandbox https://codesandbox.io/s/baking-soft-shadows-forked-m0dxx1?file=/src/App.js (cube have 2 blend shapes: up-morph, right-morph it does not have armature applied yet).

Any advice how to handle Morph Targets in react three fiber is warm welcome

Edit

I found that can get to the influencers through the scene

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

  const inluencer = useRef(0)

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

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

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

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

Is it possible to use Skinned mesh along with Morph targets like in the three.js https://threejs.org/examples/#webgl_animation_skinning_morph (armature not included to the cube object in the code sandbox example)?

React Three Fiber Morph Targets with Skinned mesh

0 Answers0