1. 程式人生 > >three.js載入紋理為黑色

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);
  }

找了好久,發現這個方法是非同步的,畫布已經渲染完後再給平面加了紋理,所以沒顯示。

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

});

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