Hi.
I’m trying to understand / replicate the animation of expanding and shrinking vertices in the morph targets section. If you go to: https://threejs.org/docs/#api/en/materials/MeshLambertMaterial
and click on the morph targets check box in controls, you will see what I’m talking about.
It goes from this
to this
and repeats
From looking at the source code on that page, I think I understand that the generateMorphTargets() function has a lot to do with it
function generateMorphTargets( mesh, geometry ) {
var vertices = [], scale;
for ( var i = 0; i < geometry.vertices.length; i ++ ) {
vertices.push( geometry.vertices[ i ].clone() );
scale = 1 + Math.random() * 0.3;
vertices[ vertices.length - 1 ].x *= scale;
vertices[ vertices.length - 1 ].y *= scale;
vertices[ vertices.length - 1 ].z *= scale;
}
geometry.morphTargets.push( { name: 'target1', vertices: vertices } );
}
but then in the render() section of the source code i don’t understand where mesh.morphTargetInfluences is coming from. Here’s what I mean:
var render = function () {
requestAnimationFrame( render );
var time = Date.now() * 0.001;
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.005;
if ( prevFog !== scene.fog ) {
mesh.material.needsUpdate = true;
prevFog = scene.fog;
}
if ( mesh.morphTargetInfluences ) {
mesh.morphTargetInfluences[ 0 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
}
renderer.render( scene, camera );
};
I would greatly appreciate your help! I just want to learn how to replicate the morph targets effect shown on the threejs docs page for lambert materials! If anyone could provide their code and an explanation for how they did it, I would really appreciate it!
