Three.js r60 Карта высот

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 возвращает высоту y, заданную текущими столбцами col и row, maxCol и maxRow (для целей тестирования вы можете, конечно, заменить его на правильный поиск массива или изображение в градациях серого ... 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);