title: Morphing Geometry - Three.Js
body: <p>So I have this code that will generate the user's desired dimension and display it on a customized <code>new THREE.Geometry()</code> . This may be an off topic to most of you. But hey, I'm just new to Three.js </p>
  
  <p>My problem is that:</p>
  
  <ul>
  <li>I can't find a way to insert the <code>geometry.morphTargets</code>. Or simply, I don't know how to use it properly</li>
  </ul>
  
  <p>So here's my code:</p>
  
  <pre><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();
  </code></pre>