Javascript THREE.js使用承诺添加纹理

我正在尝试使用Promissions在

THREE.JS

中加载纹理，但我不知道如何实现。我见过它们是如何工作的，但有没有什么例子？ 我试图在立方体网格中加载一个pic（

img.png

）

---

我不想使用JSON。

这是来自THREE.js的THREE.ImageUtils.loadTexture的源代码：

THREE.ImageUtils = {

  crossOrigin: undefined,

  loadTexture: function ( url, mapping, onLoad, onError ) {

    var loader = new THREE.ImageLoader();
    loader.crossOrigin = this.crossOrigin;

    var texture = new THREE.Texture( undefined, mapping );

    loader.load( url, function ( image ) {

      texture.image = image;
      texture.needsUpdate = true;

      if ( onLoad ) onLoad( texture );

    }, undefined, function ( event ) {

      if ( onError ) onError( event );

    } );

    texture.sourceFile = url;

    return texture;

  },

因此，您可以将其封装在一个返回承诺的自定义函数中（这是ES6语法）：

---

这是THREE.js中THREE.ImageUtils.loadTexture的源代码：

THREE.ImageUtils = {

  crossOrigin: undefined,

  loadTexture: function ( url, mapping, onLoad, onError ) {

    var loader = new THREE.ImageLoader();
    loader.crossOrigin = this.crossOrigin;

    var texture = new THREE.Texture( undefined, mapping );

    loader.load( url, function ( image ) {

      texture.image = image;
      texture.needsUpdate = true;

      if ( onLoad ) onLoad( texture );

    }, undefined, function ( event ) {

      if ( onError ) onError( event );

    } );

    texture.sourceFile = url;

    return texture;

  },

因此，您可以将其封装在一个返回承诺的自定义函数中（这是ES6语法）：

---

我使用

THREE.TextureLoader

并将其包装成这样的承诺：

// Wrapper function that returns a Promise that resolves to a texture instance
function loadTexture(url) {
  return new Promise(resolve => {
    new THREE.TextureLoader().load(url, resolve)
  })
}

// How to use it
loadTexture('myTexture.jpg').then(texture => {
  var geometry = new THREE.SphereBufferGeometry(500, 60, 40)
  var material = new THREE.MeshBasicMaterial({ map: texture })
  sphere = new THREE.Mesh(geometry, material)
  scene.add(sphere)
})

---

我使用

THREE.TextureLoader

并将其包装成这样的承诺：

// Wrapper function that returns a Promise that resolves to a texture instance
function loadTexture(url) {
  return new Promise(resolve => {
    new THREE.TextureLoader().load(url, resolve)
  })
}

// How to use it
loadTexture('myTexture.jpg').then(texture => {
  var geometry = new THREE.SphereBufferGeometry(500, 60, 40)
  var material = new THREE.MeshBasicMaterial({ map: texture })
  sphere = new THREE.Mesh(geometry, material)
  scene.add(sphere)
})

---

已弃用THREE.ImageUtils.loadTexture的可能副本。改为使用三个.TextureLoader（）。查看我下面的回复，了解替代解决方案Three.ImageUtils.loadTexture已被弃用。改为使用三个.TextureLoader（）。查看我下面的回复，了解其他解决方案