Update and get the new Mesh of a morph target

Questions
1

Hey , I am pretty new to three.js so if its trivial sorry.

I am having a morph target mesh which converts from a sphere to a suzanne which I control using the dat.gui by changing the morphInfluence values
The code for that is :

folder.add(params, 'morphTarget', 0, 1).step(0.01).onChange(function(value) {
     console.log(mesh.morphTargetInfluences[0]);
     mesh.morphTargetInfluences[0] = value;
 });

I need to get a new geometry each and everytime as I change the morph so I can use the geometry to create shapes with it.

2

Morph target animation is a form of vertex displacement and normally performed in the vertex shader. If you want to generate a new geometry, you have to implement the GPU code in JavaScript in order to correctly displace vertices according to the defined morph targets and its influence values.

Fortunately, you don’t have to write this code from scratch. You can basically use the code from Mesh.raycast() that performs the displacement for raycasting:

Based on this code, you can generate a new position attribute that you can use to create the geometry for your shape.

1 Like
3

Note that this will be slow for larger meshes — both baking the mesh, and then the physics engine will probably need to compute a convex hull for each ‘frame’ in the animation. You likely need to precompute all this before rendering.

1 Like
5

Is there any other way to make the process faster …

7

Please share complete code or a demo, otherwise we can only guess what the bug might be and this will take a lot of time.

1 Like