Solución:
En Three.js, las utilidades CollisionUtils.js y Collisions.js ya no parecen ser compatibles, y el propio mrdoob (creador de three.js) recomienda actualizar a la versión más reciente de three.js y usar la clase Ray para este propósito. en lugar de. Lo que sigue es una forma de hacerlo.
La idea es esta: digamos que queremos comprobar si una malla dada, llamada “Player”, interseca alguna malla contenida en una matriz llamada “collidableMeshList”. Lo que podemos hacer es crear un conjunto de rayos que comienzan en las coordenadas de la malla Player (Player.position) y se extienden hacia cada vértice en la geometría de la malla Player. Cada rayo tiene un método llamado “intersectObjects” 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 estructura metálica roja con las teclas de flecha y rotarlo 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 por cada intersección como se describe arriba. La parte importante del código se encuentra a continuación.
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...
}
}
Hay dos problemas potenciales con este enfoque en particular.
(1) Cuando el origen del rayo está dentro de una malla M, no se devolverá ningún resultado 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 jugador) se “deslice” entre los distintos 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 realicen el esfuerzo de detección de colisiones desde su perspectiva, o incluir más vértices en la malla (por ejemplo, usando CubeGeometry (100, 100, 100, 20, 20, 20) en lugar de CubeGeometry (100, 100, 100, 1, 1, 1). El último enfoque probablemente causará un impacto en el rendimiento, por lo que recomiendo usarlo con moderación.
Espero que otros contribuyan a esta pregunta con sus soluciones a esta pregunta. Yo mismo luché con él durante bastante tiempo antes de desarrollar la solución que se describe aquí.
Este es un tema demasiado amplio para cubrirlo en una pregunta SO, pero para engrasar un poco el SEO del sitio, aquí hay un par de puntos de partida simples:
Si desea una detección de colisiones realmente simple y no un motor de física completo, consulte (enlace eliminado debido a que no hay más sitios web existentes)
Si, por otro lado, desea alguna respuesta de colisión, no solo “¿A y B chocaron?”, Eche un vistazo a Physijs, que es un contenedor de Ammo.js súper fácil de usar construido alrededor de Three.js