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 did not find any code on the Internet that applies textures to json models using three.js r53. I assume Three.js is processing textures modified from a previous version. Any guidance?

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

Answer 1

Maybe another answer worked on an older version, this is how I got the job

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

Answer 2

EDIT: This post was the year I answered it, and it seems like my answer was posted shortly before the API change. This answer will not work (trusting the words of Kumar Sanket Sahu , did not check)

Even if it's older than a year since I found it now when searching for a solution:

textureloader gives you a callback after loading the texture:

 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 as an example.

Answer 3

It worked for me in September 2019.

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

Using:

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