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 );
} );

Fenian

Answer 1

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;

});

Aday

Here's the documentation: threejs.org/docs/#Reference/Loaders/TextureLoader – Quetzal

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! – Rental

What is suggested in the documentation doesn't work for me. – Ragamuffin

The link above is not valid, try this one threejs.org/docs/#api/en/loaders/TextureLoader – Sinfonietta

Answer 2

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.

Came

Answer 3

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.' );
    }
);

Oversexed