three.js加载纹理为黑色

照着文档例子给平面添加纹理,可一直都显示不出图片,network里有图片,控制台也没报错

drawPlane(){
    var geometry = new THREE.PlaneGeometry(20, 30)
    // // 实例化一个加载器
    // var loader = new THREE.TextureLoader();
    // // 加载一个资源
    // loader.load('images/background.png');
    var textureLoader = new THREE.TextureLoader();
    var texture = textureLoader.load('images/background.png', function (texture) {
      console.log('0')
    });

    var material = new THREE.MeshBasicMaterial({
      // color: 'red'
      map: texture
    })
    var plane = new THREE.Mesh(geometry, material);
    // plane.position.set(10, 2, 10)
    plane.position.x = 20
    plane.position.y = 20
    plane.position.z = 20
    plane.rotation.y = 45 * Math.PI / 180;
    this.scene.add(plane);
  }

three.js加载纹理为黑色_第1张图片

找了好久,发现这个方法是异步的,画布已经渲染完后再给平面加了纹理,所以没显示。

var texture = textureLoader.load('images/background.png', function (texture) {

});

所以在渲染方法里加上window.requestAnimationFrame(this.render.bind(this)),背景就能显示了

你可能感兴趣的:(three.js加载纹理为黑色)