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

v7pvogib 于 2023-08-02 发布在 Java

关注(0)|答案(3)|浏览(86)

我有一个地形山脉与相机飞行视图定位接近heightmap。摄像机使用标准键盘控制，不允许在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;
    }

}

字符串

JavaScript

来源：https://stackoverflow.com/questions/48030611/three-js-how-to-make-a-camera-follow-a-terrain-heightmap

3条答案

按热度按时间

jfewjypa1#

在这个片段中：

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

字符串
...距离> 10的交点将被忽略，但随后摄影机将移动到地形上方+20处。我怀疑这就是为什么它不能跟随地形下降。我不太确定“太陡”的问题，但这可能是类似的…试着将光线投射器保持在高于最大地形高度的高度，而不是相机的位置。
如果问题仍然存在，您可能需要包括现场演示或地形导出。

赞(0）回复(0）举报 2023-08-02

cgfeq70w2#

将camera.position复制为一个向量，然后提升vector 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;
       }

字符串

赞(0）回复(0）举报 2023-08-02

6l7fqoea3#

var actualMoveSpeed = 10000;

if ( camera.moveForward   ) { 
                
if( typeof mesha1v[1] == 'object'   ){

  var castFrom = new THREE.Vector3();
      var castDirection = new THREE.Vector3(0,-1,0);
     
        castFrom.copy(camera.position);
      castFrom.z = castFrom.z - actualMoveSpeed;
         var raycaster = new THREE.Raycaster(castFrom.position, new THREE.Vector3(0, -1, 0));
    var intersections = raycaster.intersectObject( mesha1v[1] );
     if (intersections.length < 0){
     

camera.translateZ( - actualMoveSpeed   );

}  else {        camera.translateY(  10000  );             }
}
                
            }

字符串

赞(0）回复(0）举报 2023-08-02

我来回答

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

3条答案

相关问题

热门标签

最新问答