Storystacking

Raycaster

C'est quoi ?

Raycaster permet de créer un rayon qui sera tirer d'une caméra vers un autre vecteur 2d (coordonnées x & y). Cela permet d'utiliser les coordonées de la souris pour ajouter de l'interaction entre notre scene et l'utilisateur.

Raycaster

Objectif

On va tenter de changer la couleur d'un mesh au clique de la souris. Par étapes :

1. Créer le raycaster et prévoir un vecteur pour les coordonées de la souris.
2. Ajouter une méthode et un évènement qui mettant à jour le vecteur quand la souris bouge.
3. Ajouter une méthode pour scanner les objets qui auront été en contact avec le rayon.
4. Changer la couleur du materiel.

Raycaster
& Vector

javascript

// Prépare le rayon
const raycaster = new THREE.Raycaster();

// Crée un vecteur 2d vide
const mousePointer = new THREE.Vector2();

vector2d

Position de la souris

On va ajouter un évènement click sur le window et récupérer sa position, pour ensuite mettre à jour le vecteur :

javascript

const updateMousePointer = ( event ) => {
  // Les positions sont calculées de manières à se
  // situer entre -1 et +1
  const x = ( event.clientX / window.innerWidth ) * 2 - 1;
  const y = ( event.clientY / window.innerHeight ) * 2 -1;

  mousePointer.x = x;
  // Inverse l'axe Y en accord avec celui de three.js
  mousePointer.y = -y;
};

window.addEventListener( 'click', (event) => {
  updateMousePointer(event);
});

add event listener

Détection

Une fois le vecteur à jour, nous allons tirer un rayon à l'endroit du clique pour voir s'il intercepte un élément dans notre scene via la position de la caméra :

javascript

const raycasting = () => {
  // Tire un rayon avec la position de la caméra et le pointer
  raycaster.setFromCamera( mousePointer, camera );

  // Cherche des éléments traversés par le rayon
  const intersects = raycaster.intersectObjects( scene.children );

  for( const child of intersects ){
    child.object.material.color.set( "red" );
  }

  // Demander un rendu
  renderer.render( scene, camera );
};

const updateMousePointer = ( event ) => {
  [...]
  raycasting();
 };

Git Gud

🔥❄️⚔️

BattleMesh

Créer un nombre aléatoire de formes dans une scene, et permettre de cliquer dessus pour les supprimer.

Indice: scene.remove() et mesh.dispose()