Question

如何使用Three.js中的新THREE.TextureLoader加载多个纹理？

目前我正在加载我的纹理：

  var texture1 = THREE.ImageUtils.loadTexture('texture1.jpg');
  var texture2 = THREE.ImageUtils.loadTexture('texture2.jpg');
  var texture3 = THREE.ImageUtils.loadTexture('texture3.jpg');
  var texture4 = THREE.ImageUtils.loadTexture('texture4.jpg');
  var texture5 = THREE.ImageUtils.loadTexture('texture5.jpg');
  ...

Google Chrome的开发者工具会发出以下警告：

不推荐使用THREE.ImageUtils.loadTexture。使用改为THREE.TextureLoader（）。

我尝试使用新的THREE.TextureLoader：

var loader = new THREE.TextureLoader();

loader.load('texture1.jpg',function ( texture1 ) {});
loader.load('texture2.jpg',function ( texture2 ) {});
loader.load('texture3.jpg',function ( texture3 ) {});
loader.load('texture4.jpg',function ( texture4 ) {});
loader.load('texture5.jpg',function ( texture5 ) {});

我做错了什么？

TextureLoader

Answer 1

加载器返回纹理，实际上非常简单：

var loader = new THREE.TextureLoader();
var texture1 = loader.load('texture1.jpg');
var texture2 = loader.load('texture2.jpg');

您可以看到r74dev示例已使用新语法更新：https://github.com/mrdoob/three.js/blob/dev/examples/webgl_decals.html#L49-L51

Answer 2

您可以使用promise来异步加载所有纹理，如下所示：

const loader = new THREE.TextureLoader();
const texture = Promise.all([loader.load('texture1.jpg'), loader.load('texture2.jpg')], (resolve, reject) => {
    resolve(texture);
}).then(result => {
    // result in array of textures
});

如何使用新的THREE.TextureLoader

2 个答案: