CODEWITHSUNDEEP
javascriptthree.js
user6498255
user6498255

Reputation:

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

Any suggestions?

Upvotes: 0

Views: 483

Answers (1)

WestLangley
WestLangley

Reputation: 104783

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

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

Upvotes: 3

Related Questions