javascript - Morph Target Animations in THREE.js for a custom mesh -

javascript - Morph Target Animations in THREE.js for a custom mesh -

i working on create animation displays revolution of 2d function axis create 3d surface. i've been able render surface successfully, , i'm trying create animation section using morphtargets.

unfortunately, although have pushed of morph frames geometry, i'm having problem getting animation play. of animation examples have found utilize blender import models, , aren't helpful (many outdated well).

i looking @ morphing horse illustration ( http://threejs.org/examples/#webgl_morphtargets_horse ), , tried replicate code much possible, haven't been successful.

here's code initializing morphverticeholder, 2d array hold vertices of each animation frame

//first indices of multiarray corresponds morph frame, sec vertice var morphverticeholder = []; for(var = 0; < 20; i++) { morphverticeholder[i] = []; }

and here code pushing vertices along axis. note simultaneously force morph vertices well. mi stands mesh interval.

for(var = xstart; <= xend; i+= mi) { geo.vertices.push(new three.vector3(i,0,0)); for(var j = 0; j < 20; j++) { //20 frames of morph animation morphverticeholder[j].push(new three.vector3(i,0,0)); } }

this code pushes of vertices. ranges along x axis, while j ranges along theta, filling in vertices mesh.

//push vertices var tmesh = 2*math.pi/meshpoints; //theta mesh interval verticecounter = 0; for(var = xstart; <= xend; i+=mi) { var rmain = solveequation(i); var rsecond = solveequation(i+mi); var counter = 0; for(var j = 0; j < 2*math.pi; j += tmesh) { geo.vertices.push(new three.vector3(i, rmain*math.cos(j/1000),rmain*math.sin(j/1000))); for(var k = 0; k < 20; k++) { morphverticeholder[k].push(new three.vector3(i, rmain*math.cos(j*(k+1)/20),rmain*math.sin(j*(k+1)/20))); } } }

the dividing 1000 purpose of starting original mesh out close 0, , animating rotating using morph vertices (which range 1/20 of desired value 20/20.

then force faces. can seek interpret algorithm, figured out how maintain track of vertice where.

for(var = 0; < meshpoints; i++) { var si = meshpoints*(i+1); var si2 = meshpoints*(i+2); for(var j = 0; j < meshpoints-1; j ++) { if(i === 0) { //first point, fill end geo.faces.push(new three.face3(si+j, si+j+1, 0)); geo.faces.push(new three.face3(si+j+1, si+j, 0)); //filll body geo.faces.push(new three.face3(si+j, si+j+1, si2+j)); geo.faces.push(new three.face3(si+j+1, si+j, si2+j)); geo.faces.push(new three.face3(si+j+1, si2+j, si2+j+1)); geo.faces.push(new three.face3(si2+j, si+j+1, si2+j+1)); } else if(i === meshpoints-1) { //last point, fill end geo.faces.push(new three.face3(si+j, si+j+1, meshpoints-1)); geo.faces.push(new three.face3(si+j+1, si+j, meshpoints-1)); } else { geo.faces.push(new three.face3(si+j, si+j+1, si2+j)); geo.faces.push(new three.face3(si+j+1, si+j, si2+j)); geo.faces.push(new three.face3(si+j+1, si2+j, si2+j+1)); geo.faces.push(new three.face3(si2+j, si+j+1, si2+j+1)); } } }

and here's rest, initializing , such.

for(var k = 0; k < 20; k++) { geo.morphtargets.push( { name: "target" + k, vertices: morphverticeholder[k]} ); } var uniforms = { resolution: { type: "v2", value: new three.vector2 }, zmax: { type: "f", value: maxz}, zmin: { type: "f", value: minz} }; var mat = new three.shadermaterial({ uniforms: uniforms, vertexshader: document.getelementbyid('cubevertexshader').innerhtml, fragmentshader: document.getelementbyid('cubefragmentshader').innerhtml }); functionobject = new three.mesh( geo, mat); this.scene.add(functionobject); functionobject.name = 'current'; this.animation = new three.morphanimation( functionobject, 'revolution' ); this.animation.play(); this.setwithinrender(function() { this.animation.update(.1); });

this.setwitinrender puts anonymous function render loop of three.js (this function called separately setup three.

as mentioned above, mesh renders, , if rid of /1000 when pushing original vertices whole surface. however, animation, set above, doesn't play. have insight this?

thanks!

after little bit more research, , delving source code, discovered material used must have morphtargets attribute set true. had tried shader material using, have manually apply morphtargetinfluences in vertex shader.

therefore, switched material on to

var mat = new three.meshnormalmaterial( { color: 0x990000, morphtargets: true } );

and worked out fine!

javascript three.js