Storystacking

Blender to three.js

2025 - 2026

Exporter une scène

Pour exporter correctement notre scène vers un projet three.js, il faut s'assurer de plusieurs choses :

avoir nommer les éléments
appliquer les transformations des objets
cocher les bonnes options d'exportation en glTF

Nommer les calques

Nommer les calques permet de facilement identifier les différents éléments de notre scène une fois qu'elle sera importée dans notre projet three.js :

Appliquer les transformations

Certaines transformations comme scale, rotation ou location sont définies dans blender lors de la manipulation des éléments. Dans certains cas, il faut les appliquer pour éviter des décalages. En sélectionnant un élément, on trouvera ensuite dans le menu Object l'option Apply avec plusieurs possibilités :

On peut maintenant exporter au format glTF depuis l'onglet file > exporter > glTF 2.0. Un menu avec des options apparaîtra, n'oublions pas de cocher 3 options :

Transform > + Y Up
Mesh > Loose Edges
Mesh > Loose Points

canyon.glb

Prévisualiser

Ces options permettent de visualiser la courbe une fois dans un environnement threejs. Une bonne pratique est d'aller tester notre fichier directement dans l'éditeur :

threejs editor

Importer la scène

Charger le glTF

Pour impoter la scène dans notre projet, il faut ajouter l'extention GLTFLoader. Ensuite nous pourrons charger notre fichier .glb :

GLTF Loader Loading 3D Models

const loader = new GLTFLoader();
const gltf = await loader.loadAsync( "path/to/model.glb" );

Ajouter dans la scène

Au plus simple il suffit d'ajouter directement gltf.scene avec notre objet scene :

scene.add( gltf.scene );

La scene de blender deviendra un Group dans threejs.

Cibler par nom

Nos objets sont noirs, ils ont un MeshStandardMaterial qui est très gourmand en performance et attend au moins une source lumineuse pour être visible.

Dans notre cas nous allons simplement cibler nos objets par leurs noms et modifier leurs matériaux pour des MeshBasicMaterial via la méthode de getObjectByName() :

const rocks = scene.getObjectByName( "rocks" );
rocks.material = new THREE.MeshBasicMaterial( { color: 'grey' } );