Texture in three.js no console errors still not working

78 views Asked by At

I'm new to three.js and need to make a project for school. For this project I need a texture on my cube. But the screen stays black.. and there are no console errors! I did everything I can so this is kinda my last change haha.

My code:

<script src="js/three.min.js"></script>
<script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  // +
 var material = new THREE.MeshLambertMaterial({
       map: THREE.ImageUtils.loadTexture('images/crate2.jpg')
   })

  // =
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 5;

  var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.05;

    renderer.render(scene, camera);
  };

  render();

</script>

2

There are 2 answers

0
2pha On BEST ANSWER

You do not have a light in your scene. Adding one like below should work

// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0xffffff); // white light
scene.add(light);

I would add a link to a js fiddle but it seems they have changed and I can not longer find where to get the link. Anyway, just ad some sort of light.

0
pailhead On

Perhaps adding a light would help? That or try using THREE.MeshBasicMaterial