飞机总是黑色答案

【问题标题】：Plane always black飞机总是黑色
【发布时间】：2016-06-25 02:13:51
【问题描述】：

我想在我的平面上添加一个水平和垂直重复的纹理。问题是，当我尝试应用纹理时，它总是黑色的。我没有收到任何错误，我已经尝试添加一些灯，但问题仍然存在；我不知道如何解决它...这是我所做的：

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

有什么建议吗？

【问题讨论】：

标签： javascript three.js

【解决方案1】：

TextureLoader.load() 是一种异步方法。这就是为什么它有一个onload 参数。

您在纹理加载之前调用render()。一种解决方案是在加载程序回调中调用render()。

var loader = new THREE.TextureLoader();

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

    renderer.render( scene, camera );

} );

另一个解决方案是有一个动画循环。但这对于静态场景来说不是必需的。

three.js r.78

【讨论】：