When creating our Three.js scene, we can natively generate basic 3D objects such as cubes.
But, it is also possible to include 3D models created with independent modeling tools such as Blender !
Exporting a modeled object from Blender
After modeling a 3D object in Blender, if we want to use it with Three.js, we have to export it out of the software.
To export it, the first step is to select it in the 3D view. Then we navigate to the
File / Export menu.
The submenu that opens offers us several formats, for this tutorial we choose
This file format will generate an
.OBJ file and optionally an
MTL file is used to store the textures and rendering options of our 3D object. If our object is only composed of a simple 3D structure, the export will only generate an
We fill in the path and name of the
OBJ file. If an
MTL file is created, its name will be identical.
Our 3D model is composed of a 3D structure with texture and rendering options, so Blender exports two files :
Import and use the 3D model with Three.js
We have now exported our creation !
To use this 3D object in a Three.js application, we will use the
MTLLoader classes in the following tutorial :
We still have a lot to learn about loading 3D objects into Three.js !
In chapter 9 and 10 of the downloadable guide, we will discover the details of loading 3D objects, and all the related notions (dynamic shadows, animations …).
You can download the complete guide here :