Javascript 如何使用新的THREE.TextureLoader加载多个纹理

如何从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');
  ...

谷歌chrome的开发者工具发出以下警告：

不推荐使用THREE.ImageUtils.loadTexture。使用 三个。改为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 ) {});

我做错了什么

---

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

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

---

您可以看到，r74dev示例已经使用新语法进行了更新：

您可以使用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.js，但我建议您缺少一些与仅在加载所有纹理后执行代码相关的内容（回调问题）。请重新阅读问题。。。问题的实质是什么？看看这个问题，你没有对纹理做任何事情。根据文档，这不再是事实：你需要使用一个回调，称为onLoad。你可以使用这个回调，但你不必这样做。看看这个工作示例，我正在加载两个纹理并在场景中使用它们：或者看看代码-返回了一个空的纹理对象，但“onLoad”函数告诉您，当对象“就绪”时，对我来说没有意义-load返回一个纹理对象，因此，在promise.all中等待它们几乎会立即解析，即使没有加载纹理，因此您需要像newpromise一样包装加载函数（（resolve，reject）=>loader.load（texture，resolve，（）=>{}，reject））@是的，这只是一个简短的版本。您可能会向加载程序额外解释一个承诺扩展：newpromise（（resolve，reject）=>{loader.load（textureSource，texture resolve（texture））}）；因此，它将被包装在两个承诺中，这两个承诺是肯定的。