THREE JS TextureLoader | 易学教程

问题

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

回答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;

});

回答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.

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

来源：https://stackoverflow.com/questions/14010165/three-js-textureloader

标签

WebGL

three.js

textures