three.js - Change facing direction of CSS3DObject -
i have 3d scene bunch of css object want rotate pointing towards point in space.
my css objects simple rectangles lot wider high:
var element = document.createelement('div'); element.innerhtml = "test"; element.style.width = "75px"; element.style.height = "10px"; var object = new three.css3dobject(element); object.position.x = x; object.position.y = y; object.position.z = z;
per default, created objects defined if "facing" z-axis. means if use lookat()
function, objects rotate "test" text face point.
my problem rather rotate "right edge" of div pointing towards desired point. i've tried fiddling up-vector, feel wont work because still want up-vector point up. tried rotating object math.pi/2
along y axis first, lookat()
seems ignore prior set rotation.
it seems need redefine objects local z-vector instead, runs along global x-vector. way objects "looking at"-direction right in scene, , lookat()
orient properly.
sorry mangling terminology, newbie 3d programmer here.
object.lookat( point )
orient object object's internal positive z-axis points in direction of desired point.
if want object's internal positive x-axis point in direction of desired point, can use pattern:
object.lookat( point ); object.rotatey( - math.pi / 2 );
three.js r.84
Comments
Post a Comment