How do I use texture on a sphere in three.js

Question

I've downloaded a sphere example from: http://aerotwist.com/lab/getting-started-with-three-js/ and I can see the nice red sphere. I'd like to use a texture on it. I've tried this:

var texture = THREE.ImageUtils.loadTexture("ball-texture.jpg");
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
texture.repeat.set( 125, 125 );
texture.offset.set( 15, 15 );
texture.needsUpdate = true;
var sphereMaterial = new THREE.MeshBasicMaterial( { map: texture } );
var sphere = new THREE.Mesh(new THREE.Sphere(radius, segments, rings),sphereMaterial);

but I can't see anything, all is black. Does anyone have a working example for sphere texture?

Answer 1

You might have two problems.

First, try loading it like this:

var texture = THREE.ImageUtils.loadTexture('ball-texture.jpg', {}, function() {
    renderer.render(scene, camera);
});

texture.needsUpdate = true;

Make sure that the texture size is a power of two (512x512px for IE).

Answer 2

Are you using Firefox? This could be a problem in your browser. Firefox uses some kind of cross-site-blocker for textures. The result is black instead. Take a look at this site for more info: http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures-disabled-in-firefox-5/

Answer 3

Do you have a rendering loop, or did you render the scene just once?

You need to have a rendering loop so that when the THREE.ImageUtils loads the image and updates the texture, you re-render the scene with the now updated texture.

All the three.js examples seem to rely on this technique. I.e., Fire off several async operations involving a fetch of a remote resource, start rendering loop, let scene be updated as remote resources arrive.

IMHO this is Three.js's biggest gotcha for Javascript newbs (like me) who are not familiar with how async operations work.