css transforms - Three.js cube face rotation vector in relation to camera -

i have rotating sphere on have div attached example can viewed here: https://jsfiddle.net/ao5wdm04/ calculate x , y values , place div using translate3d transform , works quite well.

my question how can values rotatex, rotatey , rotatez or rotate3d transforms div "tangents" sphere surface. know cube mesh faces sphere center assume rotation vector of outward facing normal vector in relation camera contain values need. i'm not quite sure how obtain these.

update

by using euler angles i'm achieving desired effect, shown here: https://jsfiddle.net/ao5wdm04/1/ rotation not large enough.

disclaimer: know nothing three.js. i've done bit of opengl.

your euler angles coming model-view-projected origin (lines 74-80). can't see logic behind this.

if div on sphere surface, should oriented normal of sphere @ location of div. fortunately, have these angles. named rotation.

if replace euler angles in lines 82-84 rotation angles used position div, in browser div appears edge on when @ edge of circle, , face on when @ centre. kind of looks moving in circle, edge on screen. effect want?

my modification linked code:

82 var rotx = (rotation.x * (180/ math.pi)); 83 var roty = (rotation.y * (180/ math.pi)); 84 var rotz = 0; 

---

edit

ah, ok. rotation variable of camera. governs tangent @ equator. need modify orientation account latitude.

make roty equal negative latitude. make sure rotation happens before equatorial rotation. rotations not commutative.

in summary, changes code @ https://jsfiddle.net/ao5wdm04/1/ follows:

27 var lat = 45 * math.pi / 180; ... 82 var rotx = (rotation.x * (180/ math.pi)); 83 var roty = - 45; ... 88 document.getelementbyid('face').style.webkittransform = 'translate3d(' + x + 'px,' + y + 'px,0px) rotatey('+rotx+'deg) rotatex('+roty+'deg)'; 

i don't know how latitude should propagate between init , render functions. said, i'm not familiar language.