You can use threejs to build you own objects as we already learned in previous examples, but sometimes it is useful to use professional softwares (like 3Ds, Blender etc) to build more complex objects and animations. When this is the case, you can rely on pre-defined loaders to load these external objects.
In this project you can change between several objects loaded from a set file formats like PLY, OBJ, GLTF etc.
Open in a new tabThe way threejs deals with loading files is similar no matter the format you choose. In our project we build one function for each format because each one uses a different threejs class. We will illustrate the use of the GLTF loader.
First we must load the file considering it's name and path.
loadGLTFFile('../assets/objects/', 'TocoToucan', false, 2.0);
In the loadGLTFFile function that we built we pass the model name and path, if it is visible or not and the desired Scale. Inside de function we load the object and finally add the loaded object to the scene. See the code fragment below to see the main parts of the function.
function loadGLTFFile(modelPath, modelName, visibility, desiredScale)
{
var loader = new GLTFLoader( );
loader.load( modelPath + modelName + '.gltf', function ( gltf ) {
var obj = gltf.scene;
obj.name = modelName;
obj.visible = visibility;
(...)
scene.add ( obj );
(...)
}
}
Important: To load external files you have to create a local server. See detailed information of why and how here.