Three.js GLTF model loading

In Three.js, to load a 3D model file, you can use the GLTF format. GLTF is an open JSON-based standard for the exchange and runtime loading of 3D models. This article will explain in detail how to use Three.js to load the GLTF model.

1. Download the GLTF model

Before starting, make sure you already have a GLTF model file. You can download GLTF model files from 3D model websites or other resource libraries. For example, you can find millions of free and paid 3D models on Sketchfab , all of which support the GLTF format.

2. Load the GLTF model

Here are the basic steps to load a GLTF model:

1. First, we need to create a scene and camera.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
复制代码

2. Then, we need to add a renderer and set its size.

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
复制代码

3. Next, we need to use GLTFLoader()the function to load the GLTF model and provide it with a callback function to handle the action after the loading is complete.

var loader = new THREE.GLTFLoader();
loader.load('model.gltf', function (gltf) {
    var model = gltf.scene;
    scene.add(model);
}, undefined, function (error) {
    console.error(error);
});
复制代码

In the above code, GLTFLoader()the function will load the 'model.gltf' file and add the model to the scene after loading is complete. If loading fails, the callback function will print an error message.

4. Finally, we need to render the scene in a loop so that the 3D model can be displayed.

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
render();
复制代码

The above render()function uses requestAnimationFrame()functions to continuously render the scene so that the 3D model appears on the screen.

3. Add a light source

If a model lacks lighting effects, it can look very clumsy and unreal. Therefore, we need to add a couple of lights to the scene.

For example:

var ambientLight = new THREE.AmbientLight( 0xffffff, 0.5 );
scene.add( ambientLight );

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );
复制代码

The above code adds an ambient light and a directional light. The ambient light illuminates all objects in the scene, while the directional light source simulates the effect of sunlight, which can produce more realistic shadow and highlight effects.

4. Animation Control

If the model is animated, it can be controlled using AnimationMixer()the and AnimationClip()functions provided by Three.js.

For example:

var mixer = new THREE.AnimationMixer(model); // model为之前加载的模型
var clips = gltf.animations;
clips.forEach( function ( clip ) {
    mixer.clipAction( clip ).play();
});
复制代码

The above code will import all the animations of the GTLF model and mixer.clipAction()play them through the function.

Summarize

So far, we have learned how to load 3D model files in GLTF format in Three.js. The basic steps include: creating a scene, adding a renderer, loading a model, adding light sources, and animation control. Of course, there are many other details that need to be considered and optimized in the actual application process. I hope this article can be helpful to you.