飞机总是黑色 [英] Plane always black

问题描述

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

I want to add a texture to my plane that repeats horizontal and vertical. The thing is, when I try to apply the texture, it is always black. I don't get any errors, and i already tried to add some lights, but the problem is still there; I don't know how to solve it... Here is what I did:

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

有什么建议吗?

推荐答案

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

TextureLoader.load() is an asynchronous method. That is why it has an onload argument.

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

You are calling render() before the texture loads. One solution is to call render() in the loader callback.

var loader = new THREE.TextureLoader();

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

    renderer.render( scene, camera );

} );

另一个解决方案是使用动画循环.但静态场景不需要.

Another solution is to have an animation loop. But that is not required for static scenes.

three.js r.78

three.js r.78

这篇关于飞机总是黑色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！