Morph Targets example

[Russo-creation]

Hi,

I have been trying to add on the scene object with Morph Targets and have control the influencers. But without success https://codesandbox.io/s/baking-soft-shadows-forked-m0dxx1?file=/src/App.js

I have been looking for examples and topics related with usage Morph Targets in r3f but there is almost nothing about that.

regarding this topic #309 When I'm tiring the approach:

<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')

With primitive approach

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

Object appears on the scene but I don't know how to affect on the influencers and change to different material or apply skinned mesh (with armature animation) like in this example https://threejs.org/examples/#webgl_animation_skinning_morph which is my goal.

Is it possible to have similar control over the object like in the three.js example in r3f?

It would be really useful to see some kind example with Morph Targets in the gallery https://docs.pmnd.rs/react-three-fiber/getting-started/examples

---

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 in the code sandbox example)?

[leannepepper]

I was also getting the error Cannot read properties of undefined (reading 'length') when trying to access the morphTargetInfluences on the mesh. However, I found that if you call updateMorphTargets() in a useLayoutEffect it clears that up :)
Here's a basic example:
https://codesandbox.io/s/r3f-morphtargets-basic-example-mguh5d?file=/src/App.tsx

[culdo]

It's because r3f do not passed the geometry into the SkinnedMesh() constructor instead setting it after initialized. So it will not trigger the this.morphTargetInfluences.push( 0 ) line inside Mesh()'s updateMorphTargets().

You need to pass the geometry into the <SkinnedMesh>'s args prop, which is supposed to be passed as the constructor args.