Home

Index

How to use the LoaderUtils function from three

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

three.LoaderUtils provides utility functions for three.js loaders.

ColladaLoader.js

16
17
18
19
20
21
22
23
24
25

load: function (url, onLoad, onProgress, onError) {

        var scope = this;

        var path = (scope.path === '') ? THREE.LoaderUtils.extractUrlBase(url) : scope.path;

        var loader = new THREE.FileLoader(scope.manager);
        loader.setPath(scope.path);
        loader.load(url, function (text) {

278

+ 15 other calls in file

FBXLoader.js

GitHub: sneha-belkhale/AI4Animation-js

39
40
41
42
43
44
45
46
47

load: function ( url, onLoad, onProgress, onError ) {

        var self = this;

        var path = ( self.path === undefined ) ? THREE.LoaderUtils.extractUrlBase( url ) : self.path;

        var loader = new THREE.FileLoader( this.manager );
        loader.setResponseType( 'arraybuffer' );

229

+ 21 other calls in file

How does three.LoaderUtils work?

three.LoaderUtils is a utility class that provides various helper functions to be used within a three.js loader. These functions include parsing URLs, loading textures, and generating unique IDs.

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

123
124
125
126
127
128
129
130
131
132
      return;
    }

    content = extensions[EXTENSIONS.KHR_BINARY_GLTF].content;
  } else {
    content = THREE.LoaderUtils.decodeText(new Uint8Array(data));
  }
}

var json = JSON.parse(content);

+ 74 other calls in file

LegacyJSONLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

26
27
28
29
30
31
32
33
34
35

load: function ( url, onLoad, onProgress, onError ) {

        var scope = this;

        var path = ( this.path === '' ) ? THREE.LoaderUtils.extractUrlBase( url ) : this.path;

        var loader = new THREE.FileLoader( this.manager );
        loader.setPath( this.path );
        loader.setWithCredentials( this.withCredentials );

+ 7 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import * as THREE from "three";
import { LoaderUtils } from "three";

const loader = new THREE.TextureLoader();
const textureUrl = "path/to/texture.jpg";

// Load texture with LoaderUtils
loader.load(
  LoaderUtils.extractUrlBase(textureUrl) + textureUrl,
  function (texture) {
    // do something with the loaded texture
  },
  undefined,
  function (error) {
    console.error(`Error loading texture: ${error}`);
  }
);

In this example, three.TextureLoader is used to load a texture with the URL path/to/texture.jpg. Before passing the URL to the loader's load() method, LoaderUtils.extractUrlBase() is used to extract the base URL, which is then concatenated with the original URL to ensure that it is loaded from the correct location. The resulting texture is then passed to the success callback for further processing.

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

199
200
201
202
203
204
205
206
207
208

    content = data;

} else {

    const magic = THREE.LoaderUtils.decodeText( new Uint8Array( data, 0, 4 ) );

    if ( magic === BINARY_EXTENSION_HEADER_MAGIC ) {

        try {

+ 3 other calls in file

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

218
219
220
221
222
223
224
225
226
227

        content = extensions[ EXTENSIONS.KHR_BINARY_GLTF ].content;

    } else {

        content = THREE.LoaderUtils.decodeText( new Uint8Array( data ) );

    }

}

+ 13 other calls in file

index.cjs

GitHub: Brakebein/node-three-gltf

1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
}
else if (source.uri === undefined) {
    throw new Error('THREE.GLTFLoader: Image ' + textureIndex + ' is missing URI and bufferView');
}
const promise = Promise.resolve(sourceURI).then(function (sourceURI) {
    three.LoaderUtils.resolveURL(sourceURI, options.path);
    return new Promise(function (resolve, reject) {
        loader.load(three.LoaderUtils.resolveURL(sourceURI, options.path), resolve, undefined, reject);
    });
}).then(function (texture) {

+ 5 other calls in file

index.js

GitHub: cs64188/three-fbxloader

36
37
38
39
40
41
42
43
44
45

load: function ( url, onLoad, onProgress, onError ) {

        var self = this;

        var resourceDirectory = THREE.LoaderUtils.extractUrlBase( url );

        var loader = new THREE.FileLoader( this.manager );
        loader.setResponseType( 'arraybuffer' );
        loader.load( url, function ( buffer ) {

+ 17 other calls in file

index.js

GitHub: stephensmitchell-forks/meshcat

160
161
162
163
164
165
166
167
168
169
parseObject(json, geometries, materials) {
    if (json.type == "_meshfile_object") {
        let geometry;
        let material;
        let manager = new THREE.LoadingManager();
        let path = ( json.url === undefined ) ? undefined : THREE.LoaderUtils.extractUrlBase( json.url );
        manager.setURLModifier(url => {
            if (json.resources[url] !== undefined) {
                return json.resources[url];
            }

MMDLoader.js

GitHub: BaurTokenov/three-js-editor-2

69
70
71
72
73
74
75
76
77
78
}
else if (this.path !== '') {
    resourcePath = this.path;
}
else {
    resourcePath = three_1.LoaderUtils.extractUrlBase(url);
}
const modelExtension = this._extractExtension(url).toLowerCase();
// Should I detect by seeing header?
if (modelExtension !== 'pmd' && modelExtension !== 'pmx') {

+ 4 other calls in file

GLTFLoader.js

GitHub: tmmgroupag/threebox

152
153
154
155
156
157
158
159
160
161

        content = data;

} else {

        var magic = THREE.LoaderUtils.decodeText(new Uint8Array(data, 0, 4));

        if (magic === BINARY_EXTENSION_HEADER_MAGIC) {

                try {

277

+ 5 other calls in file

JSONLoader.js

GitHub: alan-wu/ZincJS

-2

+ 23 other calls in file

LegacyGLTFLoader.js

GitHub: VeinKowal/veins

311
312
313
314
315
316
317
318
319
320
}

GLTFBinaryExtension.prototype.loadShader = function (shader, bufferViews) {
  var bufferView = bufferViews[shader.extensions[EXTENSIONS.KHR_BINARY_GLTF].bufferView];
  var array = new Uint8Array(bufferView);
  return THREE.LoaderUtils.decodeText(array);
};
/*********************************/

/********** INTERNALS ************/

+ 59 other calls in file

GLTFLoader.js

GitHub: VeinKowal/veins

177
178
179
180
181
182
183
184
185
186
      return;
    }

    content = extensions[EXTENSIONS.KHR_BINARY_GLTF].content;
  } else {
    content = _three.LoaderUtils.decodeText(new Uint8Array(data));
  }
}

var json = JSON.parse(content);

+ 9 other calls in file

index.js

GitHub: edyMartin2/AdonisGameTeam

3634
3635
3636
3637
3638
3639
3640
3641
3642

	},

	getString: function ( size ) {
		var data = this.getArrayBuffer ( size )
		var s = THREE.LoaderUtils.decodeText( data );
		return s;
	}
} );

+ 266 other calls in file

glfloader.js

GitHub: blitzher/p6-drones

112
113
114
115
116
117
118
119
120
121
        }

        content =
            extensions[EXTENSIONS.KHR_BINARY_GLTF].content;
    } else {
        content = THREE.LoaderUtils.decodeText(
            new Uint8Array(data)
        );
    }
}

+ 309 other calls in file

e7be5359-ca18-4cca-ae35-134d9904e925____GLTFLoader.js

GitHub: TAULO/CodeGenerator

22
23
24
25
26
27
28
29
30
31

load: function ( url, onLoad, onProgress, onError ) {

	var scope = this;

	var path = this.path !== undefined ? this.path : THREE.LoaderUtils.extractUrlBase( url );

	var loader = new THREE.FileLoader( scope.manager );

	loader.setResponseType( 'arraybuffer' );

+ 44 other calls in file

fbxloader.js

GitHub: magdazelena/WhatWeWear

39
40
41
42
43
44
45
46
47
48

load( url, onLoad, onProgress, onError ) {

  const self = this;

  const resourceDirectory = THREE.LoaderUtils.extractUrlBase( url );

  const loader = new THREE.FileLoader( this.manager );
  loader.setResponseType( 'arraybuffer' );
  loader.load( url, ( buffer ) => {

+ 15 other calls in file

viewer.js

GitHub: MichaelPolla/mip-viewer

224
225
226
227
228
229
230
231
232

}

load(url, rootPath, assetMap) {

  const baseURL = THREE.LoaderUtils.extractUrlBase(url);

  // Load.
  return new Promise((resolve, reject) => {

+ 5 other calls in file

FBXLoader.js

GitHub: fahadbakkar8510/sports-configurator

38
39
40
41
42
43
44
45
46
47
load: function (url, onLoad, onProgress, onError) {
  var self = this;

  var path =
    self.path === undefined
      ? THREE.LoaderUtils.extractUrlBase(url)
      : self.path;

  var loader = new THREE.FileLoader(this.manager);
  loader.setResponseType('arraybuffer');

+ 2 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