three.js - What's the best way to put multiple textures/images on a single Sphere?

Question

As in the title, I'm trying to do something like this: http://taggalaxy.de/ I've the images, now I'm trying to undestand how to put them on a single sphere.

Thanks!

Answer 1

First, you will need to change the default UV coordinates used in the sphere so the corners of each square region get the UV coordinates (0,0), (1,0), (0,1), and (1,1). Then, when creating the mesh, for the material use a MeshFaceMaterial, which should contain an array of the materials you want to use on the sphere. Finally, for each of the faces in the geometry of the mesh, you will need to set the materialIndex field to the corresponding index of the material in the array. For a related question, you should check out: Three.js - multiple material plane

EDIT: sample code below

var v00 = new THREE.Vector2(0,0);
var v01 = new THREE.Vector2(0,1);
var v10 = new THREE.Vector2(1,0);
var v11 = new THREE.Vector2(1,1);

var m1 = new THREE.MeshBasicMaterial( {map:  new THREE.ImageUtils.loadTexture('images/background.jpg') } );
var m2 = new THREE.MeshBasicMaterial( { map:  new THREE.ImageUtils.loadTexture('images/special-square.png') } );
var m  = new THREE.MeshFaceMaterial( [m1, m2] );

var g = new THREE.SphereGeometry( 60, 6, 5 );
g.faces[6].materialIndex = 1;
g.faces[7].materialIndex = 1;
g.faceVertexUvs[0][6] = [ v11.clone(), v01.clone(), v10.clone() ] ;
g.faceVertexUvs[0][7] = [ v01.clone(), v00.clone(), v10.clone() ] ;

mesh = new THREE.Mesh( g, m );
scene.add(mesh);

The only problem with this code is that the image will be shaped like a trapezoid and there will be a bit of distortion near one of the diagonals. Perhaps a more aesthetically pleasing solution would be to instead arrange a bunch of PlaneGeometry objects around a spherical region? If so, I check out the source code of the example at: http://mrdoob.github.io/three.js/examples/css3d_periodictable.html