three.js載入紋理為黑色
阿新 • • 發佈:2019-02-14
照著文件例子給平面新增紋理,可一直都顯示不出圖片,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)),背景就能顯示了