CODEWITHSUNDEEP
javascriptthree.jswebgl
DPH
DPH

Reputation: 261

Texturing a sphere in THREE.js

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.

Upvotes: 3

Views: 3175

Answers (1)

WestLangley
WestLangley

Reputation: 104833

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

Upvotes: 4

Related Questions