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

Posted 2023-02-27

【中文标题】如何在three.js中的位置半径内获取其他3D对象

【英文标题】：How to get other 3D objects within a radius of a position in three.js

【发布时间】：2013-07-14 00:51:08

【问题描述】：

我在 three.js 中有一个 3D 场景，我需要在其中获取源对象 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();

You can see the JSfiddle of this here.

如果您将指示的变量更改为更大的数字，例如 200，那么您会看到处理时间开始失控。我觉得必须有一种更简单的方法来减少这样做的数组I looked at the documentation for the Raycaster of three.js，我注意到near 和far 属性都说“这个值表示可以根据距离丢弃哪些对象。”所以我认为有一些内部函数用于在投射所有光线之前根据距离细化结果。

I did a little digging on this and came up with a single function inside of 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 半径内的所有对象。我什至不需要使用 Raycasting，因为我对网格碰撞不感兴趣，而只是源对象 X 半径内的对象列表。由于场景的设置方式，我什至不需要递归到这些对象的子对象。所以我觉得必须有一些内部函数或简单地使用THREE.Vector3 对象和数学来按距离细化它们的东西。在这种情况下，这必须比 Raycasting 便宜得多。如果在 three.js 中已经有一个函数可以处理这个问题，我不想从头开始重新创建一个。我也意识到这可能是一个非常冗长的问题，因为很可能是单行答案，但我想确保我有所有的细节和其他东西，以防其他人稍后搜索它。

【问题讨论】：

Three.js r.59 有一个octree example。

@WestLangley 哇，我什至没有看到，但是根据我在渲染器中看到的，该示例可能具有一些可能被证明有用的功能 :) 谢谢，我会看看那

【参考方案1】：

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

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

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

第三个优化是在每次物理更新中分配一堆新的Raycaster 和相关对象。相反，您可以保留一个 Raycaster 池（甚至是一个 Raycaster），然后只更新它们的属性。这将避免大量垃圾收集。

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

在这些优化之外，如果您需要做任何特别复杂的事情，您可能需要考虑使用外部物理库，它会为您管理此类优化。目前最流行的与 Three.js 一起使用的是 Physijs、Cannon.js 和 Ammo.js。

【讨论】：

那是一篇措辞出色的帖子。太感谢了。你涵盖了很多我什至没有考虑过的观点。我曾考虑对对象进行分区，但无法想出一种方法来处理分区“边界”上的对象。似乎八叉树的实现正是我处理该优化所需要的。尽管有函数/变量名称，但在这种情况下，我实际上并不需要检查碰撞，而是需要检查距离。该系统在我正在开发的 MMO 服务器中用作“视线”、仇恨检测等的预过滤器。

我继续并将其标记为我的答案，因为实施八叉树肯定比我最初的想法有更好的性能提升 :) 我什至不知道他们在三个.js 中添加了八叉树:P 再次感谢！