变形几何 - Three.Js

时间:2014-05-21 13:03:33

标签: javascript three.js morphing

所以我有这个代码可以生成用户所需的维度并将其显示在自定义的new THREE.Geometry()上。对大多数人来说,这可能是一个偏离主题的话题。但是,嘿,我刚刚接触到Three.js

我的问题是:

  • 我找不到插入geometry.morphTargets的方法。或者简单地说,我不知道如何正确使用它

所以这是我的代码:

   //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();

2 个答案:

答案 0 :(得分:1)

我建议您查看JSONLoader如何将变形目标加载到Geometry类中的Geometry.morphTargets数组。

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 );

            }

        }

    }

答案 1 :(得分:0)

//读取morphTargets

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

//加载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);
            }
        }
    };

我想这对你有用。