CODEWITHSUNDEEP
javascriptthree.jswebgl
DPH
DPH

Reputation: 261

Using multiuple textures on a sphere [Three.js]

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.

Upvotes: 1

Views: 1505

Answers (1)

Endorox
Endorox

Reputation: 99

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 );

Upvotes: 1

Related Questions