How to use threejs to load a gltf Model

This article mainly shows you "how to use threejs to load the gltf model", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to load the gltf model using threejs" this article.

Using threejs to load the gltf model, we can render a variety of effects on the basis of the model, and achieve good results. Threejs loads the gltf model in the form of an extension, putting the loaded js code in the example folder, so, when using it, you need to refer to GLTFLoader.js extra, the specific path is as follows: three/examples/js/loaders/GLTFLoader.js, you need to use import to use, reference the file in three/examples/jsm/loaders/GLTFLoader.js. Reference the mouse control operation class library in threejs so that the mouse can be controlled in the scene:

/ / create a scene

Scene = new THREE.Scene ()

Scene.background = new THREE.Color (0xcfcfcf)

/ / create a camera and set the camera's position

Camera = new THREE.PerspectiveCamera (75, window.innerWidth / window.innerHeight, 0.1, 1000)

Camera.position.set (0,100,150)

/ / Light effect

Var ambient = new THREE.AmbientLight (0xffffff)

Scene.add (ambient)

/ / create scene rendering

Renderer = new THREE.WebGLRenderer ({antialias: true})

Renderer.setPixelRatio (window.devicePixelRatio)

Renderer.setSize (window.innerWidth, window.innerHeight)

Container.appendChild (renderer.domElement)

For detailed associated code, see the sample of threejs

/ / add gltf

Var loader = new THREE.GLTFLoader ()

Loader.load ('model file path', function (gltf) {

Model = gltf.scene

/ / add a model file to the scene

Scene.add (model)

Model.traverse (function (gltf) {

If (gltf.isMesh) {

/ / set some properties of mesh

}

});

/ / set the scale of the overall scene

Model.scale.set (10,10,10)

});

Gltf model loading effect:

These are all the contents of the article "how to use threejs to load gltf models". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!