Étape 9: Three.js : Hit-Performance avec 20 000 Points en 3D
ThreeJS nous a mis un long chemin. Au lieu de 20 000 points plats, immobiles, nous ont 20 000 points en trois espaces, tournoyer autour de centres inégales et avec la promesse ultime que nous pouvons animer la caméra, aussi et vraiment Explorer à l’intérieur de la galaxie.
Mais quand vous tapez une étoile, à quelle vitesse peut ThreeJS localiser ? Très vite, il s’avère que. A ce jour, ThreeJS ne supporte pas les intersections de raycaster pour ParticleSystems (womp womp) mais, heureusement, quelqu'un d’autre figuré ceci dehors. Il y a beaucoup de fourches, vous pouvez utiliser, ou juste mettre le code dans la bibliothèque de vous-même et reconstruire une copie personnalisée. C’est ce que vous ajouteriez à Raycaster.js (adapté à partir de code similaire, j’ai trouvé partout, comme ici) :
Une fois que la bibliothèque est construite de manière appropriée (je vais laisser cela comme un exercice pour le lecteur), obtenir l’intersection du robinet de l’utilisateur ou clic de souris est assez simple : c’est une raycaster à l’aide de la position de la caméra actuelle, la scène et (x, y) les coordonnées du clic de l’utilisateur. Pseudo code:
La réalité du code pour ce projet, avec ses multiples particlesystems et le désir de trouver l’intersection la plus proche parmi les intersections de l’ensemble de la particlesystems est un peu plus complexe. De plus, aussi bien expliqué par Jens Arps, il y a peu de viande mystère quand on tourne un point de l’écran dans un vecteur 3d (vous voyez ceci dans mon code trop : trois nouveaux. Vector3 ((e.clientX / Galaxy.Settings.width) * 2-1,-(e.clientY / Galaxy.Settings.height) * 2 + 1, 0.5)) :
Et il s’avère être assez accrocheur !
