16 Nov 2020

How To Import .GLTF Model to Three.js project?

To import a such type of format, you must read this post to work with gltf model. we shall know that how to import .gltf file format model into our three.js project.

Step 1. Firstly Import GLTFLoader.js and DARACOLoader.js files under the end of head tag.



<script src="examples/js/loaders/GLTFLoader.js"></script>

<script src="examples/js/loaders/DRACOLoader.js"></script>


Step 2. Important part of this tutorial is importing GLTF Model.

  1. Create an object of GLTFLoader.
  2. Calls THREE.DRACOLoader's static method setDecoderPath(), where as an argument, directory name is being provided.
  3. Setting DRACOLoader to GLTFLOADER.
  4. Called load() method on GLTFLoader to load a model.

DRACOLoader Optional.

Yes, DRACOLoader is optional here. You can skip/remove it.
But remember, sometimes a few GLTF model may have compressed data. then you will have to use DRACO setup to decode the data. so please keep it mandatory for instance now while you work with gltf models.

var gltfLoader= new THREE.GLTFLoader();

THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );

gltfLoader.setDRACOLoader( new THREE.DRACOLoader() );

gltfLoader.load("/examples/models/gltf/Horse.glb", function (gltf){


scene.add(gltf.scene);  // Model added to THERE.Scene

gltf.animations; //Array THREE.AnimationClip

gltf.scene; // THREE.Group 

gltf.scenes; //Array THREE.Group

gltf.cameras; // Array THREE.Camera



Updating soon...


No comments:

No Comments