Wrapping images around sphere

Question

I've read many blogs/questions about this and didn't find the right answer. I'm creating an earth in three.js. But every time I'm mapping my texture and bump map it doesn't show. Also there aren't any console errors. It still shows my light on the sphere so the sphere is still there. But the textures won't show. :(

var scene,
    camera,
    light,
    renderer,
    earthObject;

var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight;

var angle = 45,
    aspect = WIDTH / HEIGHT,
    near = 0.1,
    far = 3000;

//Environment

var container = document.getElementById('container');

camera = new THREE.PerspectiveCamera(angle, aspect, near, far);
camera.position.set(0, 0, 0);
scene = new THREE.Scene();

//light

scene.add(new THREE.AmbientLight(0x333333));

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5,3,5);
scene.add(light);

var earthGeo = new THREE.SphereGeometry (30, 40, 400), 
    earthMat = new THREE.MeshPhongMaterial(); 

// diffuse map
earthMat.map = THREE.ImageUtils.loadTexture('http://i317248.iris.fhict.nl/LSTE/globe/Images/globe.jpg');

// bump map
earthMat.bumpMap = THREE.ImageUtils.loadTexture('http://i317248.iris.fhict.nl/LSTE/globe/Images/bump.jpg');
earthMat.bumpScale = 8;


var earthMesh = new THREE.Mesh(earthGeo, earthMat);
earthMesh.position.set(-100, 0, 0); 
earthMesh.rotation.y=5;

scene.add(earthMesh);


camera.lookAt( earthMesh.position );

//Renderer code.
var renderer = new THREE.WebGLRenderer({antialiasing : true});
renderer.setSize(WIDTH, HEIGHT);
renderer.domElement.style.position = 'relative';

container.appendChild(renderer.domElement);
renderer.autoClear = false;
renderer.shadowMapEnabled = true;

function render () {
   renderer.render(scene, camera);
}

render();

can you put the code into a [fiddle](http://jsfiddle.net/)?! — marcel, Jun 24 '15 at 10:40

score 1 · Accepted Answer · answered Jun 24 '15 at 10:58

1

Two problems in your code:

you're not waiting for the images to load before rendering the scene
you're having Cross-domain Policy problems (https://en.wikipedia.org/wiki/Same-origin_policy) so the images are actually never loaded

answered Jun 24 '15 at 10:58

Shomz

37,421
4
57
85

But If I'm doing this on a cube my images will load. Why doesn't load on a sphere? – Mariette Edel Jun 24 '15 at 11:00
Really? Exactly the same code and images, just using a cube instead of a sphere? – Shomz Jun 24 '15 at 11:01
For the cube i use: `var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture('images/crate2.jpg') })` – Mariette Edel Jun 24 '15 at 11:03
I think that's the key - you're defining textures as an object parameter which might cause Three to actually wait for the images to be ready. – Shomz Jun 24 '15 at 11:06
Try doing the same with your sphere: `earthMat = new THREE.MeshPhongMaterial( {map: THREE.ImageUtils.loadTexture('http://i317248.iris.fhict.nl/LSTE/globe/Images/globe.jpg'), bumpMap: THREE.ImageUtils.loadTexture('http://i317248.iris.fhict.nl/LSTE/globe/Images/bump.jpg') } );` It looks ugly here, but you get the point. – Shomz Jun 24 '15 at 11:07
The other option is to call the renderer when the images are ready: http://jsfiddle.net/v91fs8xk/ – Shomz Jun 24 '15 at 11:08
Do you have a live version of your example somewhere? jsfiddle is getting cross-domain issues for those textures. – Shomz Jun 24 '15 at 11:10
So I was right, the images were not ready at that point. I went to your URL, and just entered `render()` into the console, and the Earth was there. :) – Shomz Jun 24 '15 at 11:17
Aaaaah yes thanks so much! Now i can continue with my project and make it interactive! – Mariette Edel Jun 24 '15 at 11:20
You're welcome! If you plan to have a running animation (calling render() all the time), you don't even need to worry about the delayed texture loading. Good luck with the project! – Shomz Jun 24 '15 at 11:24

Wrapping images around sphere

1 Answers1