变形几何 - Three.Js答案

【问题标题】：Morphing Geometry - Three.Js变形几何 - Three.Js
【发布时间】：2016-10-26 19:43:14
【问题描述】：

所以我有这段代码，它将生成用户所需的维度并将其显示在自定义的 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();

【问题讨论】：

标签： javascript three.js morphing

【解决方案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 );

            }

        }

    }

【讨论】：

我使用了上面给出的代码，遗憾的是它对我不起作用。 :(请帮忙。
您能否参考this link 这样您就可以通过某种方式检查我更新的代码。谢谢你。 :)

【解决方案2】：

//读取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);
            }
        }
    };

我想这对你有用。

【讨论】：