地形交叉口性能

时间:2018-03-22 19:28:24

标签: javascript three.js

我创建var geometry = new THREE.PlaneGeometry(512,512,255,255);然后解析jpg高度图并更改Verticle的位置以接收变形平面。比我在animate()函数中将光线从天空投射到地面以获得交点:

var raycaster = new THREE.Raycaster( new THREE.Vector3(player.x, 100, player.z), new THREE.Vector3(0, -1, 0) );
var intersects = raycaster.intersectObject( ground, true );
if(intersects.length == 1) {
    mesh.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
}

但FPS变得非常低(<20)。我也试图通过高度图得到y位置,但纹理只有256 x 256,所以如果我想让网格跟随地形,那么y坐标就是抽搐。

1 个答案:

答案 0 :(得分:1)

尽量在循环中直接计算。这也意味着你应该在循环之外分配raycaster。使用该范围也可能有助于加速光线投射:

 const direction = new THREE.Vector3(0, -1, 0);
 const position = new THREE.Vector3(player.x, 100, player.z);

 const raycaster = new THREE.Raycaster(position, direction, 0, 200);

 let y = 0;
 let count = 0;

然后在循环中有时重新计算高度:

 if(count = (count + 1) % 10){
   position.set(player.x, 100, player.z);
   y = raycaster.intersectObject( ground, true );
 }

 mesh.position.set(player.x, y, player.z);