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

我有这个问题，但是如果你把html作为文件加载（即本地不是网络服务器），很多浏览器（例如chrome）都不允许你以标准的three.js方式加载图像，因为这是一个安全违规。

Answer 4

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. Ie, 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.