Three.js如何使相机跟随地形高度图?

时间:2017-12-30 03:12:57

标签: javascript three.js game-physics

我有terrain mountain range,相机飞行视图靠近高度图。使用标准键盘控制器控制相机,不允许在y轴上移动;它停留在它的y轴上。由于地形不是均匀水平并随机渲染。如何让相机跟随地形高度图?这是一个example。下面是尝试添加raycaster以扩展地形。所有代码都在项目的animate函数中。我注意到当相机试图扩大地形时。如果太陡,它会直接通过。此外,它不会随着地形下降而跟随地形。相机保持在最高位置。

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

}

2 个答案:

答案 0 :(得分:0)

在此片段中:

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

...距离的交点&gt;忽略10,但随后摄像机移动到地形上方+20。我怀疑这就是为什么它不能跟随地形下降。我不太确定“太陡”的问题,但这可能类似......试着将raycaster保持在高于最大地形高度的高度,而不是在摄像机的位置。

如果问题仍然存在,您可能希望包含现场演示或导出地形。

答案 1 :(得分:0)

将camera.position复制到矢量并抬高矢量position.y并将raycaster设置为矢量。

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