Three.js
Interactions
2025 - 2026
Tweakpane
Première partie
Pourquoi ?
Tweakpane permet de modifier des valeurs directement depuis un menu accessible directement sur votre site, ce qui permet de visualiser différents résultats.
Types de valeurs
- Number
- String
- Boolean
- Color
- Point (vector)
Mise en place
Une fois la librairie chargée (import, CDN, local, etc.), on peut créer une variable pane:
const pane = new Pane();
Javascript object
Avant de pouvoir manipuler des valeurs, il faut créer une variable de type objet qui contiendra les valeurs à modifier pour notre pane.
// Un objet vide.
const values = {};
Notre exemple
Hello³
Les nombres
On va ajouter une valeur (ou propriété) de type Number, qui représentera la largeur de notre rectangle:
// Défini la propriété 'x' = 0
const values = {
x: 0
};
// Pour accéder à une propriété d'un objet
// on écrit le nom de la variable suivi d'un point
// puis du nom de la propriété.
console.log( values.'x' );
Lier une propriété
Maintenant il faut dire à Tweakpane via la méthode addBinding( ) qu'on veut modifier la propiété x de notre objet values:
// Défini la propriété 'x' = 0
const values = {
x: 0
};
// addBinding prend 2 paramètres:
// L'objet qui contient nos proprétés
// et le nom de la propriété à lier
// sous forme de string (entre guillements)
pane.addBinding( values, 'x' );
Ajouter un évènement ciblé
Notre fonction draw( ) n'est appelé qu'une seule fois pour le moment, ce qui empêche de visualiser les changements de valeurs de notre objet. On va rajouter un évènement via la méthode on( ) sur notre propriété x:
pane.addBinding( values, "x" )
// On ajoute un évènement via '.on()'
// Attention ceci est une méthode en chaine,
// donc on mettra le ';' à la fin.
.on( 'change', ( event ) => {
// Vérifie que c'est le dernier
// changement de notre valeur
if( event.last ){
// Affiche la nouvelle valeur
// dans la console
console.log(event.value);
}
} );
Range - Min & Max
Par défaut les nombres créent des champs simples dans Tweakpane. Parfois on voudra un champ de type range, qui permettra de jouer entre une valeur minimum et maximum:
const values = {
x: 100
};
// On passe entre crochets un objet d'options
// avec 2 propriétés, min et max.
pane.addBinding( values, 'x', {
min: -10,
max: 10
});
Range - Step
En plus de min & max, on peut définir une propriété step qui défini la valeur d'incrémentation:
const values = {
x: 0
};
// On passe la propriété step qui
// défini la valeur d'incrémentation
pane.addBinding( values, 'x', {
min: -10,
max: 10,
step: 1
});
Les couleurs
Pour ajouter une couleur à modifier, le plus simple est définir une propriété avec une valeur de type string en hexadécimal
ex: #6FFFE9
// Défini la propriété 'x' = 100
// Défini la propriété 'materialColor' = "#6FFFE9"
const values = {
x: 0,
materialColor: "#6FFFE9"
};
// On passe la propriété color
pane.addBinding( values, 'materialColor' );
Ajouter un évènement global
On peut aussi ajouter un évènement sur toute nos valeurs:
pane.addBinding( values, "x",
{
min: -10,
max: 10,
step: 1
}
)} );
pane.on( 'change', (e) => {
// On fait quelque chose
} );
Les booleans
Un boolean est une valeur vrai ou faux. Cela permet d'activer / désactiver un bout de code en vérifiant sa valeur. Deux valeurs possible true ou false sans guillement.
Tweakpane créera un champ de type checkbox.
// Défini la propriété 'x' = 0
// Défini la propriété 'materialColor' = "#6FFFE9"
// Défini la propriété 'wireframe' = false
const values = {
x: 0,
materialColor: "#6FFFE9",
wirefarme: false
};
// On passe la propriété isStroked
pane.addBinding( values, 'wireframe' );
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.
Objectif
On va tenter de changer la couleur d'un mesh au clique de la souris. Par étapes :
- Créer le raycaster et prévoir un vecteur pour les coordonées de la souris.
- Ajouter une méthode et un évènement qui mettant à jour le vecteur quand la souris bouge.
- Ajouter une méthode pour scanner les objets qui auront été en contact avec le rayon.
- Changer la couleur du materiel.
Raycaster
& Vector
// Prépare le rayon
const raycaster = new THREE.Raycaster();
// Crée un vecteur 2d vide
const mousePointer = new THREE.Vector2();
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 :
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);
});
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 :
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
🔥❄️⚔️
Tweakpane Cube
Ajouter d'autres propriétés à modifier sur notre cube avec Tweakpane.
Ex: Grossissement, rotation, autre ?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()
