math - Rotate 3D object to mouse with Three.js -



math - Rotate 3D object to mouse with Three.js -

i want rotate object in 3d space, front end side looks mouse.

function onmousemove(event){ mouse3d = projector.unprojectvector( new three.vector3( event.clientx, event.clienty, 0.5 ), photographic camera ); } var angle = ??; box.rotation.y = angle;

first unprojection right ? , secondly how calculate angle ? tan(mousex/mousey) ? i'm trying more 3d mathematics, little bit explanation nice.

thanks in advance.

class="lang-js prettyprint-override">// direction facing (without rotation) var forwards = new vector3(0,0,-1); // direction want facing (towards mouse pointer) var target = new vector3().sub(mouse3d, box.position).normalize(); // axis , angle of rotation var axis = new vector3().cross(forward, target); var sinangle = axis.length(); // |u x v| = |u|*|v|*sin(a) var cosangle = forward.dot(target); // u . v = |u|*|v|*cos(a) var angle = math.atan2(sinangle, cosangle); // atan2(sin(a),cos(a)) = axis.normalize(); // overwrite rotation box.rotation.makerotationaxis(axis, angle);

alternatively, utilize quaternions:

class="lang-js prettyprint-override">// overwrite rotation box.usequaternion = true; box.quaternion.setfromaxisangle(axis, angle);

math mouse rotation three.js

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -