Question

所以我有一个运行良好的高度图系统，但是由于THREE.js已经更新为r60而删除了Face4对象，我遇到了问题。

我的代码是这样的：

this.buildGeometry = function(){

  var geo, len, i, f, y;

  geo = new THREE.PlaneGeometry(3000, 3000, 128, 128);
  geo.dynamic = true;
  geo.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));

  this.getHeightData('heightmap.png', function (data) {

    len = geo.faces.length;
    for(i=0;i<len;i++){

        f = geo.faces[i];
        if( f ){

            y = (data[i].r + data[i].g + data[i].b) / 2;

            geo.vertices[f.a].y = y;
            geo.vertices[f.b].y = y;
            geo.vertices[f.c].y = y;
            geo.vertices[f.d].y = y;

        }

    }

    geo.computeFaceNormals();
    geo.computeCentroids();

    mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({color:0xff0000}) );

    scene.add(mesh);

  });

};

这很有效，因为像素代表每个面部。现在，如果这些面都是三角形的，那怎么办呢？

类似地，我也使用图像映射进行模型定位。每个像素与相应的Face4匹配，并且期望的网格被放置在其质心处。现在怎么办呢？

我真的很想能够更新库并且不想再被卡在r59中了= [

Answer 1

这种方法适用于最新版本（在r66上测试）。

请注意，genFn返回给定当前col和row，maxCol和maxRow的高度y（出于测试目的，您当然可以使用正确的数组查找或灰度图像替换它... 64x64确定网格分辨率和1x1现实世界的尺寸。

var genFn = function(x, y, X, Y) {
    var dx = x/X;
    var dy = y/Y;
    return (Math.sin(dx*15) + Math.cos(dy * 5) ) * 0.05 + 0.025;
};

var geo = new THREE.PlaneGeometry(1, 1, 64, 64);
geo.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));

var iz, ix,
gridZ1 = geo.widthSegments +1,
gridX1 = geo.heightSegments+1;
for (iz = 0; iz < gridZ1; ++iz) {
    for (ix = 0; ix < gridX1; ++ix) {
        geo.vertices[ ix  + gridX1*iz ].y = genFn(ix, iz, gridX1, gridZ1);
     }
}
geo.computeFaceNormals();
geo.computeVertexNormals();
geo.computeCentroids();

var mesh = new THREE.Mesh(
    geo,
    mtl
);

scene.add(mesh);

Three.js r60高度图

1 个答案: