1

Is it possible to load multiple textures on a sphere?

I mean to say is there any way in Three.js to split a sphere into n pieces , texture them separately and render those pieces once again as a whole sphere?

I do not want to load the entire texture on the sphere, instead, only those parts are to be rendered which the user will first see on the screen and as the user rotates the sphere the rest part of the texture must be loaded.

Moreover, when I use a single image on a sphere it seems to converge at poles making it worse.

Dragan Okanovic
  • 7,509
  • 3
  • 32
  • 48
DPH
  • 261
  • 4
  • 16
  • What is that you're trying to achieve, maybe there's another way to do it? – Dragan Okanovic Dec 04 '13 at 10:07
  • I have a sphere with a panoramic image projected on to it which gives me a 360 feel as i rotate my camera(camera is inside the sphere). Now i do not want to load the entire image at once. Am thinking of chopping that panoramic image into say 'n' pieces and load only those images to fill up scene which the user will first see on the screen. As the user rotates the camera other images must load. – DPH Dec 04 '13 at 10:43
  • Does sphere support multiple textures on it in THREE.js?? – DPH Dec 04 '13 at 10:44
  • It does support multiple textures, through `ShaderMaterial`. – Dragan Okanovic Dec 04 '13 at 10:55
  • Is there any example i can go through? It would be helpful if you could provide me a link. – DPH Dec 04 '13 at 10:57
  • For example: http://stackoverflow.com/questions/16287547/multiple-transparent-textures-on-the-same-mesh-face-in-three-js/16897178#16897178 The logic of your app (panorama sphere, deferred loading of the images...) is up to you and your JS coding, just make sure that you understand rendering principles. – Dragan Okanovic Dec 04 '13 at 15:50
  • Hi, would you please go through this link http://stackoverflow.com/questions/20606350/canvas-renderer-crashes-when-using-multiple-geometry-in-three-js – DPH Dec 19 '13 at 10:09

1 Answers1

1

This should help: https://open.bekk.no/procedural-planet-in-webgl-and-three-js Instead of using a sphere try using a cube and expanding it into a sphere. Cube logic on the cube sphere will save you a good amount of time.

var geometry = new THREE.BoxGeometry( 1, 1, 1, 8, 8, 8 );
for ( var i in geometry.vertices ) {
    var vertex = geometry.vertices[ i ];
    vertex.normalize().multiplyScalar(radius);
}

var materialArray = [];
var faceMaterial = new THREE.MeshLambertMaterial({
    color: sphereColor,
    transparent: true,
    opacity: 0.4
});
for (var i = 0; i < 6; i++) {
    materialArray.push(faceMaterial);
}

var material = new THREE.MeshFaceMaterial(materialArray);
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
Endorox
  • 99
  • 9