¿Cómo detectar colisión en three.js?

Question

Estoy usando three.js.

Tengo dos geometrías de malla en mi escena.

Si estas geometrías se intersecan (o se cruzan con si se traducen) Quiero detectar esto como una colisión.

¿Cómo hago para realizar la detección de colisión con three.js? Si three.js no tiene instalaciones de detección de colisiones, ¿hay otras bibliotecas que pueda utilizar en conjunción con three.js?

Answer 1

En Three.js, la utilidad enlaces CollisionUtils.js y Collisions.js ya no parecen ser compatibles, y mrdoob (creador de three.js) mismo recomienda actualizar a la versión más reciente de three.js y utilizar la clase Ray para este fin en su lugar. Lo que sigue es una forma de hacerlo.

La idea es esta: digamos que queremos comprobar si una malla determinada, llamada "Reproductor", interseca las mallas contenidas en una matriz llamada "collidableMeshList". Lo que podemos hacer es crear un conjunto de rayos que empiecen en las coordenadas de la malla del jugador (Player.position), y se extiendan hacia cada vértice en la geometría de la malla del jugador. Cada rayo tiene un método llamado "intersectObjetos" que devuelve una matriz de objetos con los que se cruzó el rayo, y la distancia a cada uno de estos objetos (medida desde el origen del rayo). Si la distancia a una intersección es menor que la distancia entre la posición del jugador y el vértice de la geometría, entonces la colisión ocurrió en el interior de la malla del jugador, lo que probablemente llamaríamos una colisión "real".

He publicado un ejemplo de trabajo en:

http://stemkoski.github.io/Three.js/Collision-Detection.html

Puede mover el cubo de alambre rojo con las teclas de flecha y girarlo con W/A/S/D. Cuando se cruza con uno de los cubos azules, la palabra "Hit" aparecerá en la parte superior de la pantalla una vez para cada intersección como se describe arriba. La parte importante del código está debajo.

for (var vertexIndex = 0; vertexIndex < Player.geometry.vertices.length; vertexIndex++) 
{  
    var localVertex = Player.geometry.vertices[vertexIndex].clone(); 
    var globalVertex = Player.matrix.multiplyVector3(localVertex); 
    var directionVector = globalVertex.subSelf(Player.position); 

    var ray = new THREE.Ray(Player.position, directionVector.clone().normalize()); 
    var collisionResults = ray.intersectObjects(collidableMeshList); 
    if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) 
    { 
     // a collision occurred... do something... 
    } 
} 

Existen dos posibles problemas con este enfoque particular.

(1) Cuando el origen del rayo está dentro de una malla M, no se generarán resultados de colisión entre el rayo y M.

(2) Es posible que un objeto que es pequeño (en relación con la malla del reproductor) se "deslice" entre los diversos rayos y por lo tanto no se registrará ninguna colisión. Dos posibles enfoques para reducir las posibilidades de este problema son escribir código para que los objetos pequeños creen los rayos y realizar el esfuerzo de detección de colisiones desde su perspectiva, o incluir más vértices en la malla (por ejemplo, utilizando CubeGeometry (100, 100, 100, 20, 20, 20) en lugar de CubeGeometry (100, 100, 100, 1, 1, 1).) El último enfoque probablemente causará un golpe de rendimiento, por lo que recomiendo usarlo con moderación.

Espero que otros contribuyan a esta pregunta con sus soluciones a esta pregunta. Luché con él durante bastante tiempo antes de desarrollar la solución que se describe aquí.

Answer 2

Esto realmente es demasiado amplia de un tema a cubrir en una pregunta SO, pero en aras de la lubricación del SEO del sitio un poco, aquí hay un par de puntos de partida simples:

Si quieres realmente detección de colisión simple y no un completo en el motor de física a continuación, echa un vistazo a Three.js: Simple Collision Detection

Si, por el contrario te quieren algún tipo de respuesta de colisión, no sólo "hicieron a y B chocan?", echar un vistazo a Physijs, que es una envoltura Ammo.js super fácil de usar construida alrededor de Three.js