プレーンは常に黒です

Question

水平と垂直を繰り返すプレーンにテクスチャを追加したいと思います。事は、テクスチャを適用しようとすると、常に黒です。私は何の誤りもなく、私はすでにいくつかのライトを追加しようとしましたが、問題はまだそこにあります。私はそれ解決する方法がわからない...ここで私がやったことです：

window.onload = function init() 
{ 
    scene = new THREE.Scene(); 

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 
    camera.position.x = -30; 
    camera.position.y = 40; 
    camera.position.z = 30; 
    camera.lookAt(scene.position); 

    var light = new THREE.AmbientLight(0x404040); // soft white light 
    scene.add(light); 

    var spotlight = new THREE.SpotLight(0xffffff); 
    spotlight.position.set(-50, 40, 0); 
    scene.add(spotlight); 


var axes = new THREE.AxisHelper(20); scene.add(axes); 

    var renderer = new THREE.WebGLRenderer(); 
    renderer.setClearColor(0xEEEEEE); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    desenhaMapa(); 

    document.body.appendChild(renderer.domElement); 
    renderer.render(scene, camera); 

} 

    function desenhaMapa() 
{ 
    labirinto = new THREE.Object3D(); 

    var texturaPlano = new THREE.TextureLoader().load("texturaPac.jpg"); 

    geometryPlano = new THREE.PlaneGeometry(50,50); 
    materialPlano = new THREE.MeshPhongMaterial({map: texturaPlano}); 
    var planoPacMan = new THREE.Mesh(geometryPlano,materialPlano); 
    planoPacMan.rotation.x = -0.5 * Math.PI; 
    scene.add(planoPacMan); 
} 

任意の提案ですか？

Answer 1

TextureLoader.load()は、非同期方式です。そのため、引数はonloadです。

テクスチャが読み込まれる前にrender()を呼び出しています。 1つの解決策は、ローダーコールバックでrender()を呼び出すことです。

var loader = new THREE.TextureLoader(); 

var texture = loader.load('myTexture.jpg', function (texture) { 

    renderer.render(scene, camera); 

}); 

もう1つの解決策は、アニメーションループを作成することです。しかし、これは静的シーンには必要ありません。

three.js r.78