How to update threejs morph targets from blender GLTF shape keys

Question

I have a blender file with several shape keys. When I drag the slider in blender between 0 and 1, I can manipulate the shape key.

(screenshot): https://share.getcloudapp.com/bLuw8L0W

I am exporting the GLTF and importing it in threejs.

If I console.log the mesh from the GLTF, I can see the shape keys from blender in the morphTargetDictionary, and I have set up a GUI to update the morphTargetInfluences for each shape key:

https://share.getcloudapp.com/6quP71l7

folder
.add(params, "influence2", 0, 1)
.step(0.01)
.onChange(function (value) {
  console.log(dodec.morphTargetInfluences[1]);
  dodec.morphTargetInfluences[1] = value;
  //dodec.updateMorphTargets();
});

but updating these morphTargetInfluences seems to have no affect. How do I set this up so that I can achieve the same effect within Three.js that I can have within blender by moving the sliders for each shape key?

update

Here is a codepen of what I have currently:

https://codepen.io/heaversm/pen/xxVNmdb

Answer 1

The object you want to target is the mesh, which is dodec = scene.getObjectByName("Solid_0");. Inspecting what dodec is until you find a mesh will lead you here.

GLTF exports nested groups, so your mesh may be in a group in general.

You also need to set morphTargets: true on your material:

const material = new THREE.MeshStandardMaterial({
  color: 0xffa400,
  emissive: 0xbb5a5a,
  side: THREE.DoubleSide,
  flatShading: true,
  morphTargets: true, // you need this
});