如何在三.js中获取位置半径内的其他 3D 对象

Question

我有一个 3D 场景.js我需要获取源对象 X 范围内的对象数组。目前，我使用的示例是在 for 循环中使用光线投射，该循环迭代场景中存在的"可碰撞对象"数组。我觉得一定有更好的方法来解决这个问题，因为如果数组中的每个对象都必须从自身光线投射到数组中的每个其他对象，这种方法会成倍复杂。随着可碰撞对象数组的增长，这会对性能产生巨大影响。

//hold collidable objects
var collidableObjects = [];
var scene = new THREE.Scene();
var cubeGeo = new THREE.CubeGeometry( 10 , 10 , 10 );
var materialA = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var materialB = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cubeA = new THREE.Mesh( cubeGeo , materialA );
collidableObjects.push( cubeA );
scene.add( cubeA );
//Change this variable to a larger number to see the processing time explode
var range = 100;
for( var x = 0 ; x < range ; x += 20 ) {
    for( var z = 0; z < range ; z += 20 ) {
        if( x === 0 && z === 0 ) continue;
        var cube = new THREE.Mesh( cubeGeo , materialB );
        scene.add( cube );
        cube.position.x = x;
        cube.position.z = z;
        collidableObjects.push( cube );
        var cube = cube.clone();
        scene.add( cube );
        cube.position.x = x * -1;
        cube.position.z = z;
        collidableObjects.push( cube );
        var cube = cube.clone();
        scene.add( cube );
        cube.position.x = x;
        cube.position.z = z * -1;
        collidableObjects.push( cube );
        var cube = cube.clone();
        scene.add( cube );
        cube.position.x = x * -1;
        cube.position.z = z * -1;
        collidableObjects.push( cube );
    }
}

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.y = 200;
camera.lookAt( scene.position );
function render() {
    //requestAnimationFrame(render);
    renderer.render(scene, camera);
    console.log( getObjectsWithinRange( cubeA , 30 ) );
}
function getObjectsWithinRange( source , range ) {
    var startTime = new Date().getTime();
    var inRange = [];
    for( var i = 0; i < collidableObjects.length ; ++i ) {
        var ray = new THREE.Raycaster( source.position , collidableObjects[i].position , 0 , range );
        if( ( obj = ray.intersectObject( collidableObjects[i] ) ) && obj.length ) {
            inRange.push( obj[0] );
        }
    }
    var endTime = new Date().getTime();
    console.log( 'Processing Time: ' , endTime - startTime );
    return inRange;
}
render();

你可以在这里看到这个JSfiddle。

如果将指示的变量更改为较大的数字，例如 200，则会看到处理时间开始失控。我觉得必须有一种更简单的方法来减少执行此操作的数组，所以我查看了三个 Raycaster 的文档.js我注意到 near 和 far 属性都说"此值指示可以根据距离丢弃哪些对象。 所以我认为有一些内部函数用于在投射所有之前根据距离细化结果光线。

我对此进行了一些挖掘，并在Ray.js内部提出了一个功能。

distanceToPoint: function () {
var v1 = new THREE.Vector3();
return function ( point ) {
var directionDistance = v1.subVectors( point, this.origin ).dot( this.direction );
// point behind the ray
if ( directionDistance < 0 ) {
return this.origin.distanceTo( point );
}
v1.copy( this.direction ).multiplyScalar( directionDistance ).add( this.origin );
return v1.distanceTo( point );
};
}(),

我想我正在寻找一种更好的方法来获取场景中源对象 X 半径范围内的所有对象。我甚至不需要使用光线投射，因为我对网格碰撞不感兴趣，而只是源对象 X 半径内的对象列表。由于场景的设置方式，我甚至不需要递归到这些对象的子对象中。所以我觉得一定有一些内部函数或简单地使用THREE.Vector3对象和数学来按距离细化它们的东西。在这种情况下，运行数学必须比Raycast便宜得多。如果已经有一个函数可以在三.js的某个地方处理这个问题，我不想从头开始重新创建一个。我也意识到这可能是一个非常冗长的问题，很可能是一个单行答案，但我想确保我有所有的细节，以防其他人希望这样做以后搜索它。

Answer 1

碰撞检查是一个更普遍的问题，我认为如果你在 Three.js 之外的上下文中考虑它会取得更大的成功。有许多方法可用于管理需要检查彼此冲突的大量对象。以下是一些可能与您相关的优化：

第一个优化是让每个对象都有一个布尔属性，指示自上次物理更新以来它是否移动。如果您正在比较的两个对象都没有移动，则无需重新计算碰撞。如果您有大量处于稳定状态的物体(例如您可以推动的板条箱(，则这最相关。在此基础上，您还可以构建许多其他优化;例如，通常如果两个物体没有移动，它们就不会碰撞，因为如果它们碰撞，它们就会后坐(分开(。

第二个优化是，通常只需要检查一定距离内的碰撞。例如，如果您知道所有对象都小于 100 个单位，那么您可以检查是否(x1-x2)^2 + (y1-y2)^2 + (z1-z2)^2 > 100^2 .如果检查为 true(指示两个对象之间的距离很大(，则无需计算详细的碰撞。实际上，这或多或少是Raycaster为您提供的near/far优化，但是您没有在代码中使用它，因为您总是调用intersectObject方法。

第三个优化是，你在每次物理更新中分配一堆新的Raycaster和相关对象。相反，您可以保留一个光线投射器池(甚至是单个光线投射器(，并只更新其属性。这将避免大量垃圾收集。

最后，处理大量可碰撞对象的最常见通用方法称为空间分区。这个想法基本上是将你的世界划分为给定数量的空间，并跟踪哪些空间物体在。然后，当您需要计算碰撞时，您只需要检查同一空间中的其他对象。执行此操作的最常见方法是使用 Octree(8 元树(。正如WestLangley所提到的，Three.js有一个从r59开始的Octree实现，以及一个示例(来源(。以下是使用 2D 示例对空间分区概念的合理介绍。

除了这些优化之外，如果你需要做任何特别复杂的事情，你可能需要考虑使用外部物理库，它将为你管理这样的优化。目前最流行的Three.js是Physijs，Cannon.js和Ammo.js。