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