Javascript 获取地形'；s高度（y）坐标3.js

我有一个地形作为Collada模型。我需要在我的地形上添加其他模型。为此，我想我需要得到地形的高度坐标（y）乘以x和z坐标。请告诉我怎么做

var场景、摄影机、渲染器；
var raycaster=new THREE.raycaster（）；
var mouse=new THREE.Vector2（）；
var directionVector=new THREE.Vector3（）；
var投影仪=新的三个投影仪（）；
变量映射=
{
'name'：'map1.dae'，
“x”：-42.1，
y:54，
“z”：0
}
;
var映射模型；
var mapLoader=new THREE.ColladaLoader（）；
mapLoader.options.convertUpAxis=true；
加载（map.name，函数（collada）{
mapModel=collada.scene；
mapModel.position.set（map.x，map.z，map.y）；//x，z，y-如果您从混合器维度考虑；）
mapModel.rotation.y=0.002；
init（）；
制作动画（）；
});
函数init（）{
场景=新的三个。场景（）；
变量宽度=window.innerWidth，
高度=窗内高度；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
设置大小（宽度、高度）；
setClearColor（0xEEEE，1.0）；
document.body.appendChild（renderer.doElement）；
摄像机=新的三个透视摄像机（45，宽/高，0.11000）；
摄像机位置设置（150450300）；
场景。添加（摄影机）；
addEventListener（'resize'，function（））{
变量宽度=window.innerWidth，
高度=窗内高度；
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
});
window.addEventListener（'click'，onMouseClick）；
addEventListener（'mouseMove'，onMouseMove）；
var axes=新的三个.AxisHelper（1580）；
场景。添加（轴）；
var gridXZ=new THREE.GridHelper（1000,10）；
setColors（新的三种颜色（0xff0000），新的三种颜色（0xff0000））；
gridXZ.position.set（0,0,0）；
//红斧0.00001565217-常数为1，蓝斧0.000009
scene.add（gridXZ）；
场景.添加（mapModel）；
var灯=新的三点灯（0xfffff3，0.8）；
灯。位置。设置（-300600300）；
场景。添加（灯光）；
var sphereSize=1；
var pointLightHelper=new THREE.pointLightHelper（light，sphereSize）；
添加（pointLightHelper）；
var light2=新的三点光源（0xd7f0ff，0.2）；
照明2.位置设置（600200）；
场景。添加（light2）；
var sphereSize=1；
var pointLightHelper2=新的三个.PointLightHelper（light2，sphereSize）；
添加（pointLightHelper2）；
var light3=新的三点光源（0xFFFFFF，0.5）；
light3.位置设置（300400，-200）；
场景。添加（light3）；
var sphereSize=1；
var pointLightHelper3=新的三个.PointLightHelper（light3，sphereSize）；
scene.add（pointLightHelper3）；

获得heightmap图像数据后，需要像下面这样读取像素：

该方法将图像传输到画布，在画布上可以进行imageData查找，以查看每个像素的RGBA值

var imgData = context.getImageData(0,0,canvas.width,canvas.height);

function lookUpPixelColor( imageData, ux, uy ){
  var px = Math.floor( ux * imageWidth );
  var py = Math.floor( uy * imageHeight );
  var index = (uy * imageWidth + ux) * 4;
  if( index < 0 || index >= imageData.data.length ){
    return 0;
  }
  return {
    r: imageData.data[ index ] ,
    g: imageData.data[ index + 1 ],
    b: imageData.data[ index + 2 ]
  };
}

这假设平面几何体的第一个顶点为0,0，并转到planeWidth/planeHeight。从THREE.js生成的PlaneGeometry可能不是这种情况，因为它可能从-width/2到width/2

所以它看起来像：

geometry.vertices.forEach( function( v ){
  var ux = (v.x + planeWidth * 0.5) / planeWidth;
  var uy = (v.y + planeHeight * 0.5) / planeHeight;

  var rgb = lookUpPixelColor( imageData, ux, uv );
  var height = rgb[ 0 ] / 255;
  var z = height * maxHeight;

  v.z = z;
});

另一个怪癖是平面可能是沿着XZ而不是XY生成的，因此如果是这种情况，那么在查找过程中只需将v.y替换为v.z即可

或者，您可以使用来自FaceVertexUV的UV进行查找，其中的值可以很好地从0设置为1

完成后，您需要像这样巩固更改：

geometry.verticesNeedUpdate = true;

---

在计算出高度之前，你需要一个地形高度图。好的。我有png格式的高度图，就像这样。我如何才能得到给定点的高度？

geometry.verticesNeedUpdate = true;