Three.js: Get updated vertices with morph targets

Question

I've got some morph targets working:

https://jsfiddle.net/3wtwzuh3/2/ (Use the slider control to see the morph)

However, I'd like to be able to access the new positions of the vertices after the morph. If you notice in the linked example, I am displaying the y coordinate of the first vertex of the cube and it is not updating!

// This Y vertex doesn't seem to update!
   elInfo.innerHTML = geometry.vertices[0].y;

Is it possible to get the new positions? I've tried setting all sorts of flags and have had no luck.

Thanks!

Please note this example is just for the purposes of the question, it's a little more complex in my actual project (where I need the vertex data!).

Answer 1

Morphs are updated on the GPU, not the CPU. So if you want to know the new vertex position, you have to do the same calculation on the CPU that the GPU is doing.

The method Mesh.raycast() has to do that calculation for raycasting on the CPU, so you can refer to that code as an example.

Here is a simple pattern you can follow. You will have to adapt this for your full application, as this pattern is hardwired to match your simple fiddle.

var morphTargets = mesh.geometry.morphTargets;
var morphInfluences = mesh.morphTargetInfluences;

var vA = new THREE.Vector3();
var tempA = new THREE.Vector3();

var fvA = geometry.vertices[ 0 ]; // the vertex to transform

for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) {

    var influence = morphInfluences[ t ];

    if ( influence === 0 ) continue;

    var targets = morphTargets[ t ].vertices;

    vA.addScaledVector( tempA.subVectors( targets[ 0 ], fvA ), influence ); // targets index must match vertex index

}

vA.add( fvA ); // the transformed value

fiddle: https://jsfiddle.net/3wtwzuh3/3/

three.js r.75