THREE JS TextureLoader

Question

I am trying to add texture to a model that I converted to json and imported from 3ds Max. I searched but didn't find any code online which applies texture to json models using three.js r53. I guess the way Three.js handles textures changed from previous version. Any guidance?

Following is my code:

var texloader = new THREE.TextureLoader();
var tex=texloader.load("second.jpg");
var mat = new THREE.MeshBasicMaterial({ map: tex });

loader = new THREE.JSONLoader();
loader.load( "js/JsonModels/toothz.js", function( geometry, mat ) {
    mat[0].shading = THREE.SmoothShading;
    var material = new THREE.MeshFaceMaterial( mat);
    mesh = new THREE.Mesh( geometry, material );
    mesh.scale.set( 3, 3, 3 );
    mesh.position.y = 0;
    mesh.position.x = 0;
    scene.add( mesh );
} );

score 10 · Answer 1 · answered Jan 27 '14 at 07:32

10

May be the other answer worked on the older version, this is how I got it working

var textureLoader = new THREE.TextureLoader();
textureLoader.load(url);

// Add the event listener
textureLoader.addEventListener('load', function(event){

    // The actual texture is returned in the event.content
    sphere.material.map = event.content;

});

answered Jan 27 '14 at 07:32

Sanket Sahu

8,468
10
51
65

2

Here's the documentation: http://threejs.org/docs/#Reference/Loaders/TextureLoader – SapphireSun May 09 '16 at 21:25
This is the better answer, and thanks for the documentation! It's working now. Before my object was being added to the scene with... no actual image! – Andy Sep 05 '17 at 16:51
What is suggested in the documentation doesn't work for me. – user5515 Jun 26 '18 at 16:04
The link above is not valid, try this one https://threejs.org/docs/#api/en/loaders/TextureLoader – Farhad Sep 22 '21 at 04:13

score 7 · Answer 2 · edited May 23 '17 at 12:02

EDIT: This post was a year old when I answered it, and it seems like my answer got posted shortly before the API changed. This answer won't work (trusting the words of Kumar Sanket Sahu, haven't tested)

Even if this is older than a year, since I came around it now when searching for the solution:

textureloader gives you a callback once the texture is loaded:

var texloader = new THREE.TextureLoader();
texloader.load("second.jpg", function(tex) {

  var mat = new THREE.MeshBasicMaterial({ map: tex });

  var loader = new THREE.JSONLoader();
  loader.load( "js/JsonModels/toothz.js", function( geometry, mat ) {
      mat[0].shading = THREE.SmoothShading;
      material = new THREE.MeshFaceMaterial( mat);
      mesh = new THREE.Mesh( geometry, material );
      mesh.scale.set( 3, 3, 3 );
      mesh.position.y = 0;
      mesh.position.x = 0;
      scene.add( mesh );
  } );
});

This works for the example.

score 0 · Answer 3 · answered Sep 02 '19 at 08:54

This worked for me on September 2019

load(
    url: string,
    onLoad?: ( texture: Texture ) => void,
    onProgress?: ( event: ProgressEvent ) => void,
    onError?: ( event: ErrorEvent ) => void
): Texture;

setCrossOrigin( crossOrigin: string ): TextureLoader;

Usage:

// instantiate a loader & load a resource
new THREE.TextureLoader().load(
    // resource URL
    'textures/land_ocean_ice_cloud_2048.jpg',

    // onLoad callback
     ( texture )=> {
        // in this example we create the material when the texture is loaded
        var material = new THREE.MeshBasicMaterial( {
            map: texture
         } );
    },

    // onProgress callback currently not supported
    undefined,

    // onError callback
    ( err )=> {
        console.error( 'An error happened.' );
    }
);

THREE JS TextureLoader

3 Answers3

Linked