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


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

python 3.x - PyQt5 - Signal : pyqtSignal no method connect -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)