2

我正在尝试将纹理添加到我转换为 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 );
} );
4

3 回答 3

8

可能是其他答案适用于旧版本，这就是我的工作方式

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;

});
于 2014-01-27T07:32:18.547 回答
7

编辑：当我回答这篇文章时，这篇文章已经有一年了，而且我的答案似乎是在 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 );
  } );
});

这适用于示例。

于 2013-09-25T01:20:41.173 回答
0

这在 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.' );
    }
);
于 2019-09-02T08:54:00.747 回答