Morphing Geometry - Three.Js

Question

So I have this code that will generate the user's desired dimension and display it on a customized new THREE.Geometry() . This may be an off topic to most of you. But hey, I'm just new to Three.js

My problem is that:

• I can't find a way to insert the geometry.morphTargets. Or simply, I don't know how to use it properly

So here's my code:

   //custom Object height and width
    customHeightWidth(customWidth, customHeight);

       function customHeightWidth(width, height){

        material = new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture(uploadedFile),
        side: THREE.DoubleSide,
        overdraw: true,
        wireframe: false
        });
    //objects
     combined = new THREE.PlaneGeometry(width, height, 30, 10);

     geometry = new THREE.Geometry();

     geometry.name: "target1", vertices.push( new THREE.Vector3( -(width),  height, 0 ) );
     geometry.name: "target2", vertices.push( new THREE.Vector3( -(width), -(height), 0 ) );
     geometry.name: "target3", vertices.push( new THREE.Vector3(  width, -(height), 0 ) );

     geometry.computeBoundingSphere();
     geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );

     geometry1 = new THREE.Geometry();

     geometry1.vertices.push( new THREE.Vector3( width,  height, 0 ) );
     geometry1.vertices.push( new THREE.Vector3( -(width), height, 0 ) );
     geometry1.vertices.push( new THREE.Vector3(  width, -(height), 0 ) );
     geometry1.computeBoundingSphere();

     geometry1.faces.push( new THREE.Face3( 0, 1, 2 ) );

      // 1st box
        var mesh1 = new THREE.Mesh(geometry);
        var mesh2 = new THREE.Mesh(geometry1);

            //activating the meshs
        THREE.GeometryUtils.merge(combined, mesh1);
        THREE.GeometryUtils.merge(combined, mesh2);


             mesh = new THREE.Mesh(combined, material);
         this.scene.add(mesh);
        };
          }

       var animate = function() {
       requestAnimationFrame(animate);
       //mesh.rotation.x += 0.01; 
       //mesh.rotation.y -= 0.006;
       renderer.render(scene, camera);
       }

 init();
 animate();

Answer 1

I recommend reviewing how JSONLoader loads morph targets to the Geometry.morphTargets array in the Geometry class.

function parseMorphing( scale ) {

    if ( json.morphTargets !== undefined ) {

        var i, l, v, vl, dstVertices, srcVertices;

        for ( i = 0, l = json.morphTargets.length; i < l; i ++ ) {

            geometry.morphTargets[ i ] = {};
            geometry.morphTargets[ i ].name = json.morphTargets[ i ].name;
            geometry.morphTargets[ i ].vertices = [];

            dstVertices = geometry.morphTargets[ i ].vertices;
            srcVertices = json.morphTargets [ i ].vertices;

            for( v = 0, vl = srcVertices.length; v < vl; v += 3 ) {

                var vertex = new THREE.Vector3();
                vertex.x = srcVertices[ v ] * scale;
                vertex.y = srcVertices[ v + 1 ] * scale;
                vertex.z = srcVertices[ v + 2 ] * scale;

                dstVertices.push( vertex );

            }

        }

    }

Answer 2

//Reading morphTargets

for(i=o;i<geometry.morphTargets.length;i++) {
morphTargets = geometry.morphTargets[i].vertices;
return morphTargets;
}

//loading morphTargets

loadMorphTargets = function (morphTargets) {
        if (morphTargets !== undefined) {
            var i, l, v, vl, dstVertices, srcVertices;
            //for (i = 0, l = morphTargets.length; i < l; i++) {
            geometry.morphTargets[i] = {};
            geometry.morphTargets[i].name = morphTargets.name;
            geometry.morphTargets[i].vertices = [];
            var dstVertices = geometry.morphTargets[i].vertices;
            var srcVertices = morphTargets.vertices;
            for (v = 0, vl = srcVertices.length; v < vl; v += 3) {
                var vertex = new THREE.Vector3();
                vertex.x = srcVertices[ v ];
                vertex.y = srcVertices[ v + 1 ];
                vertex.z = srcVertices[ v + 2 ];
                dstVertices.push(vertex);
            }
        }
    };

I guess it will be useful to you.