0

所以我有一个运行良好的高度图系统，但是由于 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 =[

4

1 回答 1

0

这种方法适用于最新版本（在 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);
于 2014-02-26T00:56:56.487 回答