Using textures in THREE.js

By the time the image is loaded, the renderer has already drawn the scene, hence it is too late. The solution is to change

texture = THREE.ImageUtils.loadTexture('crate.gif'),

into

texture = THREE.ImageUtils.loadTexture('crate.gif', {}, function() {    renderer.render(scene);}),

Andrea solution is absolutely right, I will just write another implementation based on the same idea.If you took a look at the THREE.ImageUtils.loadTexture() source you will find it uses the javascript Image object. The $(window).load event is fired after all Images are loaded ! so at that event we can render our scene with the textures already loaded...

• CoffeeScript

  $(document).ready ->    material = new THREE.MeshLambertMaterial(map: THREE.ImageUtils.loadTexture("crate.gif"))    sphere   = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), material)    $(window).load ->        renderer.render scene, camera

• JavaScript

  $(document).ready(function() {    material = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture("crate.gif") });    sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), material);    $(window).load(function() {        renderer.render(scene, camera);    });});

Thanks...

In version r75 of three.js, you should use:

var loader = new THREE.TextureLoader();loader.load('texture.png', function ( texture ) {  var geometry = new THREE.SphereGeometry(1000, 20, 20);  var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5});  var mesh = new THREE.Mesh(geometry, material);  scene.add(mesh);});