javascript - THREE.JS - 用于碰撞检测的 OBJ+MTL 上的 Raycaster 性能 (FirstPersonControls.js)

Question

这是OBJ+MTL的上传（用作纹理）

var ambientLight = new THREE.AmbientLight(0xf0f0f0, '.$dbData['light_drone'].');
        scene.add(ambientLight);

          var modelloOBJ;
          var fileMTL = "./Uploads/'.$dbData['id'].'/Drone/";
          console.log("fileMTL", fileMTL);
          var mtlLoader = new THREE.MTLLoader();
          mtlLoader.setTexturePath(fileMTL);
          mtlLoader.setPath(fileMTL);
          mtlLoader.load("'.$dbData['file_drone'].'.mtl", function( materials ) {
            materials.preload();
            var loader = new THREE.OBJLoader();
            loader.setMaterials(materials);
            loader.load(fileMTL+"'.$dbData['file_drone'].'"+".obj", function ( modello ) {
              modelloOBJ = modello;
              modello.rotateOnWorldAxis(new THREE.Vector3(1,0,0), Math.PI * 3 / 2);
              new THREE.Vector3(1,0,0);
              scene.add(modello);
              document.getElementById("ProgressCircle").style.visibility = "hidden";

              modelloOBJ.boundingBox = (new THREE.Box3()).setFromObject(modello);
              camera.lookAt(modelloOBJ.position); //
              var vmax =modelloOBJ.boundingBox.max;
              var vmin = modelloOBJ.boundingBox.min;
              var centroX = ( vmax.x + vmin.x )/2;
              var centroY = vmin.y;
              var centroZ = ( vmax.z + vmin.z )/2;


            },

这些是光线投射器（S）

  function animate() {

 var delta = clock.getDelta();

 controls.update(delta);

 var vector = new THREE.Vector3(0,-1,0);


vector = camera.localToWorld(vector);
vector.sub(camera.position);

var raycaster = new THREE.Raycaster(camera.position,vector);

var intersects = raycaster.intersectObjects(scene.children, true);


 if (intersects.length > 0) {

 console.log(intersects[0].distance);

    if(intersects[0].distance<1.21){

    camera.position.y=(camera.position.y+(1.21-intersects[0].distance));

  }

  if(intersects[0].distance>1.36&&intersects[0].distance<1.45){

    camera.position.y=(camera.position.y-(intersects[0].distance-1.215));

  }

}


 var vector1 = new THREE.Vector3(0,0,-1);

vector1 = camera.localToWorld(vector1);
vector1.sub(camera.position);

var raycaster1 = new THREE.Raycaster(camera.position,vector1);

var intersects1 = raycaster1.intersectObjects(scene.children, true);

 if (intersects1.length > 0) {

  console.log(intersects1[0].distance);
 if(intersects1[0].distance<0.3){
  controls.moveForward=false;
  controls.w=false;
 }else{
  controls.w=true;
 }
THREE.Vector3(intersects[0].point.x,intersects[0].point.y,intersects[0].point.z);

}else controls.w=true;

    stats.update(renderer);

console.log(stats.domElement.firstChild.childNodes["0"].innerHTML);
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    console.log(renderer.info.render.faces);
  }

  animate();

问题：当我将光线投射添加到代码中时，性能会大大下降。从 60 fps 到 20 fps。

我尝试的另一件事是：

var l=1;

  function animate() {

     var delta = clock.getDelta();

    controls.update(delta);

if (l%5==0)
{
  var vector = new THREE.Vector3(0,-1,0);

vector = camera.localToWorld(vector);
vector.sub(camera.position);

var raycaster = new THREE.Raycaster(camera.position,vector);

var intersects = raycaster.intersectObjects(scene.children, true);


 if (intersects.length > 0) {

 console.log(intersects[0].distance);

    if(intersects[0].distance<1.21){

    camera.position.y=(camera.position.y+(1.21-intersects[0].distance));

  }

  if(intersects[0].distance>1.36&&intersects[0].distance<1.45){

    camera.position.y=(camera.position.y-(intersects[0].distance-1.215));

  }

}

var vector1 = new THREE.Vector3(0,0,-1);

vector1 = camera.localToWorld(vector1);
vector1.sub(camera.position);

var raycaster1 = new THREE.Raycaster(camera.position,vector1);

var intersects1 = raycaster1.intersectObjects(scene.children, true);


 if (intersects1.length > 0) {

  console.log(intersects1[0].distance);
 if(intersects1[0].distance<0.3){
  controls.moveForward=false;
  controls.w=false;
 }else{
  controls.w=true;
 }

THREE.Vector3(intersects[0].point.x,intersects[0].point.y,intersects[0].point.z);

}else controls.w=true;
}


    stats.update(renderer);

    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    console.log(renderer.info.render.faces);
   l=l+1;

  }

  animate();

在这种情况下，它们每五次调用 animate 函数执行一次。

fps 已从 20 变为 35。但这效率低下，因为我使用光线投射器在墙壁和地面上进行碰撞。

模型的大小小于 20mb。此外，当 raycaster 不工作时，该模型能够保持在 60fps 而不会出现任何下降。

请记住，我需要模型中的碰撞。

有没有办法提高性能？也许我不应该使用 raycaster？

PS Controls 是 FirstPersonControls.js，我稍微修改了一下。

标签： javascriptthree.jsraycasting