Three.js如何使相机遵循地形高度图? [英] Three.js How to make a camera follow a terrain heightmap?

问题描述

我有一个山脉高度图.相机使用标准键盘控件进行控制，该键盘控件不允许在y轴上移动；它停留在设定的y轴上.由于地形不是平坦的水平，而是随机渲染.如何使相机跟随地形高度图?这是一个示例.以下是尝试添加raycaster以在地形上缩放的尝试.所有代码都在项目的动画功能中.我注意到当相机尝试放大地形时.如果太陡，它将直接穿过.此外，它不会跟随地形下降.相机保持在最高位置.

I have a 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. Below is an attempt to add raycaster to scale over the terrain. All code is in the animate function in project. I noticed that when the camera attempts to scale up the terrain. If too steep, it will go straight through. Also, it doesn't follow the terrain as it drops. The camera remains at the highest position.

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;
    }

}

推荐答案

将camera.position复制到矢量上并提高vector position.y并将光线投射器设置到矢量上.

Copy the camera.position to a vector and raising vector position.y and setting the raycaster to the vectors.

  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如何使相机遵循地形高度图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！