Home

Index

How to use the GLTFLoader function from three

Find comprehensive JavaScript three.GLTFLoader code examples handpicked from public code repositorys.

README.md?plain=1

42
43
44
45
46
47
48
49
50
51
const THREE = window.THREE = require('three');
require('three/examples/js/loaders/GLTFLoader.js');

let navmesh;

const loader = new THREE.GLTFLoader();
loader.load( 'navmesh.gltf', ({scene}) => {
    scene.traverse((node) => {
        if (node.isMesh) navmesh = node;
    });

110

913

+ 3 other calls in file

World.js

GitHub: KleoPetroff/storyboarder

9
10
11
12
13
14
15
16
17

require('three/examples/js/loaders/GLTFLoader')
require('../vendor/three/examples/js/loaders/OBJLoader2')
const loadingManager = new THREE.LoadingManager()
const objLoader = new THREE.OBJLoader2(loadingManager)
const gltfLoader = new THREE.GLTFLoader(loadingManager)
const imageLoader = new THREE.ImageLoader(loadingManager)

objLoader.setLogging(false, false)

263

model-loader.js

GitHub: KleoPetroff/storyboarder

52
53
54
55
56
57
58
59
60
61
window.Zlib = Zlib.Zlib
let loadingManager = new THREE.LoadingManager()
let loader = new THREE.JDLoader()
let fbxLoader = new THREE.FBXLoader(loadingManager)
let objLoader = new THREE.OBJLoader2(loadingManager)
let gltfLoader = new THREE.GLTFLoader(loadingManager)
gltfLoader.setDRACOLoader(new THREE.DRACOLoader())
objLoader.setLogging(false, false)
let textures = {}
let characterModels = {}

263

index.js

GitHub: LetzCodeLuxembourg/threejs-nodejs-exporters

19
20
21
22
23
24
25
26
27
28
require('three/examples/js/loaders/OBJLoader')
const USDZExporter = require('./USDZExporter')

class NodeThreeExporter {
  constructor() {
    this.gltfLoader = new THREE.GLTFLoader()
    this.gltfLoader.setDRACOLoader(new THREE.DRACOLoader())
    this.objLoader = new THREE.OBJLoader()
    this.fbxLoader = new THREE.FBXLoader()
    this.stlLoader = new THREE.STLLoader()

world.js

GitHub: exaquark/exaquark-vue

9
10
11
12
13
14
15
16
17
18
const LAT_FACTOR = 180 / Math.PI / EARTH_RADIUS
const CAMERA_HEIGHT = 1.5
const RELEVANCE_TOLERANCE = 3
// temp hardcode an object
GLTF2Loader(THREE)
var gltfLoader = new THREE.GLTFLoader()
var fixedObjects = [
  {
    url: '/static/gltf/eiffel_tower/scene.gltf',
    lat: 48.8584,

+ 3 other calls in file

GLTFAvatarViewer.js

GitHub: q-0z/ThreeJSAVATAR

88
89
90
91
92
93
94
95
96
97
// this.renderer.setSize( window.innerWidth, window.innerHeight );
// this.renderer.setSize( container.width, container.height );

// scene info: add light, add ground, shadow

this.loader = new THREE.GLTFLoader();
this.orbitControls = new THREE.OrbitControls(this.camera, this.renderer.domElement);


this.onWindowResize();

index.js

GitHub: FlyLikeBird/three-mtl-test

127
128
129
130
131
132
133
134
135
136
});

let mesh = null;

// Load dragon GLTF model
new THREE.GLTFLoader().load("src/dragon.glb", (gltf) => {
  const dragon = gltf.scene.children.find((mesh) => mesh.name === "Dragon");

  // Just copy the geometry from the loaded model
  const geometry = dragon.geometry.clone();

+ 4 other calls in file

renderer.js

GitHub: akosblazsik/microbit-vrobot

60
61
62
63
64
65
66
67
68
69
grid.material.transparent = true;
scene.add(grid);

// model

var loader = new THREE.GLTFLoader();
loader.load('./RobotExpressive.glb', function(gltf) {

    model = gltf.scene;
    scene.add(model);

viewer.js

GitHub: MichaelPolla/mip-viewer

249
250
251
252
253
254
255
256
257

  return (path || '') + url;

});

const loader = new THREE.GLTFLoader(manager);
loader.setCrossOrigin('anonymous');
loader.setDRACOLoader(new THREE.DRACOLoader());
const blobURLs = [];

+ 5 other calls in file

three.js

GitHub: karunakaruna/aframemobile

16
17
18
19
20
21
22
23
24
25
26
if (THREE.Cache) {
  THREE.Cache.enabled = true;
}


// TODO: Eventually include these only if they are needed by a component.
require('three/examples/js/loaders/GLTFLoader');  // THREE.GLTFLoader
require('three/examples/js/loaders/OBJLoader');  // THREE.OBJLoader
require('three/examples/js/loaders/MTLLoader');  // THREE.MTLLoader
require('three/examples/js/BlendCharacter');  // THREE.BlendCharacter
require('three/examples/js/loaders/ColladaLoader');  // THREE.ColladaLoader

animation.js

GitHub: Neticon/webgl-tests

51
52
53
54
55
56
57
58
59
60
  scene.add(gridHelper)

  if (file.split('.').slice(-1).toString() === 'fbx') {
    new THREE.FBXLoader().load(file, onLoad, null, console.log)
  } else {
    new THREE.GLTFLoader().load(file, onLoad, null, console.log)

  }
  // new THREE.FBXLoader().load('./assets/animation/raptor_fbx/scene.fbx', onLoad, null, console.log)
}

+ 3 other calls in file

raptor_gltf.js

GitHub: Neticon/webgl-tests

32
33
34
35
36
37
38
39
40
41
  scene.add(ambientLight)

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
  scene.add(directionalLight)

  new THREE.GLTFLoader().load('./assets/animation/raptor_gltf/scene.gltf', onLoad, console.log, console.log)
}
function fitCamera(object) {
  const bbox = new THREE.Box3().setFromObject(object)
  camera.position.z = bbox.max.z * 6

+ 3 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About