Paso 9: Three.js: Hit-Performance con 20.000 puntos en 3D
ThreeJS nos ha conseguido una manera larga. En vez de 20.000 puntos planos, inmóviles, ahora tenemos 20.000 puntos en tres espacio, girando alrededor de centros irregulares y con la última promesa que podemos animar la cámara, demasiado y realmente explorar dentro de la galaxia.
Pero cuando toca una estrella, ¿qué tan rápido puede ThreeJS localizar? Bastante rápido resulta. A partir de este escrito, ThreeJS no soporta raycaster intersecciones para ParticleSystems (womp womp) pero afortunadamente alguien mas esta averiguado. Hay un montón de horquillas puede utilizar, o simplemente Ponte el código en la biblioteca y reconstruir una copia personalizada. Esto es lo que agregaría a Raycaster.js (adaptado de código similar que encontré, como aquí):
Una vez que la biblioteca está construida apropiadamente (te dejo esto como un ejercicio para el lector), la intersección del tap de un usuario o clic del ratón es bastante sencillo: es un raycaster utilizando la posición actual de la cámara, la escena y el (x, y) coordenadas de click del usuario. Pseudo código:
La realidad del código para este proyecto, con sus múltiples particlesystems y el deseo de encontrar la intersección más cercana entre las intersecciones de todos los particlesystems es algo más compleja. Además, como bien explica por Jens Arps, hay algunos carne de misterio al girar un punto de la pantalla en un vector 3d (ver esto en mi código también: tres nuevos. Vector3 ((e.clientX / Galaxy.Settings.width) * 2-1,-(e.clientY / Galaxy.Settings.height) * 2 + 1, 0.5)):
Y resulta ser bastante ágil.
