Three.js 如何让相机跟随地形高度图？

Question

我有一个terrain mountain range with a camera fly view positioned close to the heightmap. The camera is controlled using standard keyboard controls that doesn't allow movement in y axis; it stays on it's set y-axis. Since the terrain is not an even level and randomly renders. How can I get the camera to follow the terrain heightmap? Here is an example。下面是尝试添加 raycaster 以在地形上缩放。所有代码都在项目的动画功能中。我注意到当相机试图放大地形时。如果太陡，它将直接通过。此外，它在下降时不会跟随地形。相机保持在最高位置。

var raycaster = new THREE.Raycaster(camera.position.clone(), new THREE.Vector3(0, -1, 0));
raycaster.ray.origin.copy(camera.position);

var intersections = raycaster.intersectObjects( terrain );

if (intersections.length > 0){

    var distance = intersections[0].distance;
    if(distance > 0 && distance < 10){
        camera.position.y= intersections[0].point.y + 20;
    }

}

Answer 1

在此代码段中：

if(distance > 0 && distance < 10){
    camera.position.y= intersections[0].point.y + 20;
}

...距离大于 10 的交叉点将被忽略，但随后相机移动到地形上方 +20。我怀疑这就是为什么它在下降时不能跟随地形。我不太确定 "too steep" 问题，但这可能是相似的...尝试将 raycaster 保持在高于最大地形高度的高度，而不是在相机的位置。

如果问题仍然存在，您可能想要包括现场演示或地形导出。

Answer 2

将 camera.position 复制到矢量并提高矢量 [=14=] 并将光线投射器设置为矢量。

  var castFrom = new THREE.Vector3();
      var castDirection = new THREE.Vector3(0,-1,0);
      var raycaster = new THREE.Raycaster(camera.position.clone(), new THREE.Vector3(0, -1, 0));
        castFrom.copy(camera.position);
        castFrom.y += 1000;
        raycaster.set(castFrom,castDirection);
    var intersections = raycaster.intersectObjects( terrain );
     if (intersections.length > 0){
       camera.position.y = intersections[0].point.y+20;
       }

Three.js 如何让相机跟随地形高度图？

Three.js How to make a camera follow a terrain heightmap?

javascript

game-physics

three.js