Question

我正在尝试将纹理添加到我转换为json并从3ds Max导入的模型中。我搜索但没有找到任何在线使用three.js r53将纹理应用于json模型的代码。我想Three.js处理纹理的方式与以前的版本有所不同。有什么指导吗？

以下是我的代码：

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

可能是旧版本的另一个答案，这就是我的工作方式

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

编辑：当我回答这个帖子时，这篇文章已经有一年了，似乎我的答案在API发生变化之前很快就被发布了。这个答案是行不通的（相信Kumar Sanket Sahu的话，没有经过测试）

即使这个年龄超过一年，因为我现在在搜索解决方案时出现了：

textureloader在加载纹理后为您提供回调：

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

这适用于该示例。

Answer 3

这在2019年9月对我有用

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

setCrossOrigin( crossOrigin: string ): TextureLoader;

用法：

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

三个JS TextureLoader

3 个答案: