javascript - three.js - What's the best way to put multiple textures/images on a single Sphere? -
as in title, i'm trying this: http://taggalaxy.de/ i've images, i'm trying undestand how put them on single sphere.
thanks!
first, need change default uv coordinates used in sphere corners of each square region uv coordinates (0,0), (1,0), (0,1), , (1,1). then, when creating mesh, material use meshfacematerial, should contain array of materials want use on sphere. finally, each of faces in geometry of mesh, need set materialindex field corresponding index of material in array. related question, 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 problem code image shaped trapezoid , there bit of distortion near 1 of diagonals. perhaps more aesthetically pleasing solution instead arrange bunch of planegeometry objects around spherical region? if so, check out source code of example at: http://mrdoob.github.io/three.js/examples/css3d_periodictable.html