Home

Index

How to use the TextureLoader function from three

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

three.TextureLoader is a class in the Three.js library that loads image files as textures for use in 3D scenes.

SpaceObject.js

317
318
319
320
321
322
323
324
325
326
SpaceObject.prototype.createSprite = function () {
    if (!this._options.textureUrl) {
        throw new Error('Cannot create sprite without a textureUrl');
    }
    var fullTextureUrl = (0, util_1.getFullTextureUrl)(this._options.textureUrl, this._context.options.basePath);
    var texture = new THREE.TextureLoader().load(fullTextureUrl);
    texture.encoding = THREE.LinearEncoding;
    var sprite = new THREE.Sprite(new THREE.SpriteMaterial({
        map: texture,
        blending: THREE.AdditiveBlending,

398

FBXLoader.js

GitHub: sneha-belkhale/AI4Animation-js

115
116
117
118
119
120
121
122
123
124

        }

        // console.log( fbxTree );

        var textureLoader = new THREE.TextureLoader( this.manager ).setPath( this.resourcePath || path ).setCrossOrigin( this.crossOrigin );

        return new FBXTreeParser( textureLoader ).parse( fbxTree );

}

229

+ 21 other calls in file

How does three.TextureLoader work?

three.TextureLoader is a class in the Three.js library that loads image files from a URL and creates a texture object that can be used as a material for 3D objects in a scene. When a new TextureLoader instance is created, you can use the load() method to load an image file and create a Texture object. The load() method takes a single argument, which is the URL of the image file to be loaded. Once the Texture object is created, it can be assigned to the map property of a MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, or other types of materials to give the material a textured appearance when applied to a 3D object.

font-preview.js

GitHub: donmccurdy/msdf-bmfont-web

50
51
52
53
54
55
56
57
58
59

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.enableZoom = false;

const textureLoader = new THREE.TextureLoader();
scene.background = textureLoader.load('assets/dust_scratches.png');
scene.background.wrapS = THREE.RepeatWrapping;
scene.background.wrapT = THREE.RepeatWrapping;
scene.background.repeat.set( 2, 2 );

120

+ 3 other calls in file

app.js

GitHub: dbradleyfl/Mixed-Reality-JS

27
28
29
30
31
32
33
34
35
36
let renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
let scene = new THREE.Scene();
let camera = window.getViewMatrix ? new HolographicCamera() : new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
let raycaster = new THREE.Raycaster();
let clock = new THREE.Clock();
let loader = new THREE.TextureLoader();
let material = new THREE.MeshStandardMaterial({ vertexColors: THREE.VertexColors, map: new THREE.DataTexture(new Uint8Array(3).fill(255), 1, 1, THREE.RGBFormat) });

let ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8);
let directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.5);

Ai Example

1
2
3
4
import * as THREE from "three";

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("path/to/texture.jpg");

This creates a new instance of THREE.TextureLoader, and uses it to load a texture from the specified path. The load() method returns the loaded texture, which can then be used in a THREE.Mesh or other objects that use textures.

Ground.js

GitHub: MozillaReality/puzzle-rain

175
176
177
178
179
180
181
182
183
184
Ground.prototype.endCreditsStarted = function () {
  this.hideRain();
};

Ground.prototype.addEmitterRipples = function () {
  this.emitterRipples = this.particleSystemRipples.createParticleEmitter(new THREE.TextureLoader().load('textures/magicOver.png'));
  this.emitterRipples.setTranslation(0, 0.1, 0);
  this.emitterRipples.setState(THREE.NormalBlending);
  this.emitterRipples.setColorRamp(
    [1, 1, 1, 1,

+ 7 other calls in file

rose.js

GitHub: zya/apophenia

5
6
7
8
9
10
11
12
13
14
window.THREE = THREE;
require('../../node_modules/three/examples/js/loaders/OBJLoader');

var config = require('../../config');

var textureLoader = new THREE.TextureLoader();
var urlPath = location.pathname;
var dotsNormalMap = textureLoader.load(urlPath + 'assets/images/dots-normal-map-resized.jpg');

var loader = new THREE.OBJLoader();

index.js

GitHub: cs64188/three-fbxloader

95
96
97
98
99
100
101
102
103
104

// console.log( FBXTree );

var connections = parseConnections( FBXTree );
var images = parseImages( FBXTree );
var textures = parseTextures( FBXTree, new THREE.TextureLoader( this.manager ).setPath( resourceDirectory ), images, connections );
var materials = parseMaterials( FBXTree, textures, connections );
var deformers = parseDeformers( FBXTree, connections );
var geometryMap = parseGeometries( FBXTree, connections, deformers );
var sceneGraph = parseScene( FBXTree, connections, deformers.skeletons, geometryMap, materials );

+ 17 other calls in file

fontTextureLoaders.js

GitHub: nhalloran/liquidity.js

5
6
7
8
9
10
11
12
13
14

var promises = {};

Object.keys(urls).forEach(function(key){
  promises[key] = new Promise(function(resolve) {
    var loader = new THREE.TextureLoader();
      loader.load(urls[key],
        function(texture) {
          resolve(texture);
        },

Logo.js

GitHub: zeesaas/Three-MapGL

23
24
25
26
27
28
29
30
31
32
  }
}

static create3d(group, url, center) {
  let scale = 10
  let texture = new THREE.TextureLoader().load(url)
  let material = new THREE.SpriteMaterial({ map: texture, transparent: true, alphaTest: 0.5 })
  let logo = new THREE.Sprite(material)
  logo.name = 'logo'
  logo.scale.set(scale, scale, scale)

+ 5 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
this.cache = new GLTFRegistry();

// BufferGeometry caching
this.primitiveCache = {};

this.textureLoader = new THREE.TextureLoader(this.options.manager);
this.textureLoader.setCrossOrigin(this.options.crossOrigin);

this.fileLoader = new THREE.FileLoader(this.options.manager);
this.fileLoader.setResponseType("arraybuffer");

+ 14 other calls in file

LegacyJSONLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

72
73
74
75
76
77
78
79
80
        MultiplyBlending: THREE.MultiplyBlending,
        CustomBlending: THREE.CustomBlending
};

var _color = new THREE.Color();
var _textureLoader = new THREE.TextureLoader();
var _materialLoader = new THREE.MaterialLoader();

function initMaterials( materials, texturePath, crossOrigin, manager ) {

+ 7 other calls in file

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

2177
2178
2179
2180
2181
2182
2183
2184
2185
2186
const isFirefox = navigator.userAgent.indexOf( 'Firefox' ) > - 1;
const firefoxVersion = isFirefox ? navigator.userAgent.match( /Firefox\/([0-9]+)\./ )[ 1 ] : - 1;

if ( typeof createImageBitmap === 'undefined' || isSafari || isFirefox && firefoxVersion < 98 ) {

    this.textureLoader = new THREE.TextureLoader( this.options.manager );

} else {

    this.textureLoader = new THREE.ImageBitmapLoader( this.options.manager );

FBXLoader2.js

GitHub: XiaMenYuQi/sketchfab

105
106
107
108
109
110
111
112
113
114
}

var FBXTree = new TextParser().parse( FBXText );

var connections = parseConnections( FBXTree );
var textures = parseTextures( FBXTree, new THREE.TextureLoader( this.manager ).setPath( resourceDirectory ) );
var materials = parseMaterials( FBXTree, textures, connections );
var deformers = parseDeformers( FBXTree, connections );
var geometryMap = parseGeometries( FBXTree, connections, deformers );
var sceneGraph = parseScene( FBXTree, connections, deformers, geometryMap, materials );

+ 15 other calls in file

t.js

GitHub: 52black/scratch-vm

564
565
566
567
568
569
570
571
572
573
var loader = THREE.Loader.Handlers.get( url );
var manager = ( this.manager !== undefined ) ? this.manager : THREE.DefaultLoadingManager;

if ( loader === null ) {

	loader = new THREE.TextureLoader( manager );

}

if ( loader.setCrossOrigin ) loader.setCrossOrigin( this.crossOrigin );

+ 18 other calls in file

MMDLoader.js

GitHub: BaurTokenov/three-js-editor-2

678
679
680
681
682
683
684
685
686
687
 * @param {THREE.LoadingManager} manager
 */
class MaterialBuilder {
    constructor(manager) {
        this.manager = manager;
        this.textureLoader = new three_1.TextureLoader(this.manager);
        this.tgaLoader = null; // lazy generation
        this.crossOrigin = 'anonymous';
        this.resourcePath = undefined;
    }

+ 4 other calls in file

builder.js

GitHub: TimMerino1710/Minecraft-Interactive-Evolution

112
113
114
115
116
117
118
119
120
121
122
123
const SCENE = new THREE.Scene();
SCENE.background = new THREE.Color( BG_COLOR ).convertSRGBToLinear();
const CAMERA = new THREE.PerspectiveCamera( 75, rendCanvas.clientWidth / rendCanvas.clientHeight, 0.1, 1000);


//load a texture loader
var loader = new THREE.TextureLoader(  );
loader.crossOrigin = true;


//add a light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.9);

main.js

GitHub: teerzo/btx-face

94
95
96
97
98
99
100
101
102
103

cameraLastPos: new THREE.Vector3(0, 0, 0),

// Loaders
OBJLoader: new THREE.OBJLoader(),
textureLoader: new THREE.TextureLoader(),


initialize: function () {
    // replace icons

client.js

GitHub: star8ks/sketch

22
23
24
25
26
27
28
29
30
31
  loader: THREE.AudioLoader
}, {
  key: 'tex-id',
  // url: './id.png',
  url: './static/id.png',
  loader: THREE.TextureLoader
}, {
  key: 'file-vs',
  url: './glsl/vert.glsl',
  loader: THREE.FileLoader

_web3d.js

GitHub: truongvithien/threed

560
561
562
563
564
565
566
567
568
569
// obj_smt_01.material = material;
obj_smt_01.scale.set(.08, .08, .08);

const skin_texture = {
    map: new THREE.TextureLoader().load(settings.smt_01.dir_texture + settings.smt_01.skin_texture.base_color),
    metalnessMap: new THREE.TextureLoader().load(settings.smt_01.dir_texture + settings.smt_01.skin_texture.metallic),
    normalMap: new THREE.TextureLoader().load(settings.smt_01.dir_texture + settings.smt_01.skin_texture.normal),
    roughnessMap: new THREE.TextureLoader().load(settings.smt_01.dir_texture + settings.smt_01.skin_texture.roughness),
    aoMap: new THREE.TextureLoader().load(settings.smt_01.dir_texture + settings.smt_01.skin_texture.ambient_occlusion),
}

+ 77 other calls in file

THREEUtils.js

GitHub: VCityTeam/TIW5-3DUrbanDataVizualization

9
10
11
12
13
14
15
16
17
18
 * Texture encoding used to have the right color of the .glb model + have an alpha channel
 */
textureEncoding: THREE.sRGBEncoding,

addEquiRectangularMap(path, renderer, scene) {
  const loader = new THREE.TextureLoader();
  const texture = loader.load(path, () => {
    const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
    rt.fromEquirectangularTexture(renderer, texture);
    scene.background = rt.texture;

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About