Morph Targets on GLTF models

Questions
1

Hello,

I am fiddling with morph targets, trying to understand what they are and how they operate. I started with the Three.JS examples, one of a simple Mesh, and one of a GTLF Model.

I don’t know what’s in the GLTF model that makes it able to morph, does it have to be done inside the 3D modeling software? Or can we morph a GLTF model with Three.JS code?

I am trying to apply the same morph influences than the one from the cube mesh to a GLTF model here, is it a correct approach?

Many thanks,
P.S.: I don’t try to achieve any specific results, just trying to grasp what I could use from that feature…

2

For every vertex in a mesh, each morph target stores either a new possible location for that vertex, or an offset relative to its original location. “Applying” the morph target means three.js moves the vertex from its base location to the morphed location.

While you can create those in code with three.js, you’d need to compute where each vertex should be, and that’s not always easy for complex models. More often you’d do this in Blender. Blender calls these “shape keys” instead of morph targets, so look up any tutorial for “Blender shape keys” on youtube to get a better idea how to create these and export to glTF.

1 Like
3

Thank you for your explanations.

Shape keys from Blender seems indeed to be a simpler process, although, could we still hardcode the morphing from or to simple shapes like spheres or boxes?

I’ve tried with a SkinnedMEsh, but the transformations don’t apply fully: I am able to stretch and scale the mesh, but not to distort nor twist it. Is that the influence of the Skeleton, keeping vertices to specific rotations / relative positions?

4

You could hard-code it, yes. You might start with a sphere, and programmatically project each vertex out to a bounding box. For anything more complex than a box, the math will be more involved.

In a SkinnedMesh, each vertex is weighted to 1–4 bones, and follows the transformations of those bones. There’s no reason the bones can’t twist the vertices, and you can always add more bones for more control – but getting the exact “look” that you want is generally easier in a visual tool like Blender than in plain code.

1 Like
5

Thank you, that makes a lot of sense.

6

Try chatgpt? Vite + React