Texturing a sphere in THREE.js

Question

Is it possible to texture a sphere part by part? For example we can use 6 textures on 6 sides of the cube making it possible for us to texture the cube face by face. Is it possible to do the same in sphere?? I do not want to overlap one texture on the other, but use different textures on different parts of the sphere. For example first 1/4th of sphere with texture 1, second 1/4th of sphere with texture 2...so on. Can we achieve this using THREE.js or any other library?

Thanks in advance.

WestLangley · Accepted Answer · 2013-12-09 16:07:02Z

4

The SphereGeometry constructor has parameters that let you construct a sector of a sphere:

THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )

The easiest way to achieve what you want is to use the following pattern:

var parent = new THREE.Object3D();
scene.add( parent );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 0 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture0 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 1 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture1 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 2 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture2 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

var geometry = new THREE.SphereGeometry( 5, 24, 16, 3 * Math.PI/2, Math.PI/2 );
var material = new THREE.MeshLambertMaterial( { map: texture3 } );
mesh = new THREE.Mesh( geometry, material );
parent.add( mesh );

three.js r.63

answered Dec 9, 2013 at 16:07

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DPH Over a year ago

Thanks a lot. Its working great. There is a problem, suppose i have 32 tiles/image to be filled, i would require 32 spheres, when i do it my browser crashes very often and in IE it doesn't even show up a single tile. My main intention is load my page faster by bringing in images part by part rather than loading whole image at once. Please give me some suggestions.

WestLangley Over a year ago

The question was about 4 tiles, not 32. Consider other approaches, and post a new, detailed queestion if you are having problems.

DPH Over a year ago

Hey i need a favor, would you please suggest me some articles to go through to understand the factors or constraints that should be kept in mind while developing a high performance webgl application. I need to understand the factors that affect the webgl performance.

WestLangley Over a year ago

That is a very general webgl question. If you have more questions, you will have to make a new post and tag it as webgl.

DPH Over a year ago

I have made a new post regarding the issue. Please follow this link stackoverflow.com/questions/20606350/…

Collectives™ on Stack Overflow

Texturing a sphere in THREE.js

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related