Three.jsで3Dオブジェクトをマウスに回転

Question

3D空間内のオブジェクトを回転させて、正面が常にマウスを向くようにしたい。

function onMouseMove(event){ 
      mouse3D = projector.unprojectVector(
       new THREE.Vector3(event.clientX, event.clientY, 0.5), camera); 
} 

var angle = ??; 
box.rotation.y = angle; 

最初は正しく投影されていませんか？第二に、角度を計算する方法は？ちょうどtan（mouseX/mouseY）ですか？私は3D数学をもっと学びたいと思っているので、少し説明がうまくいくでしょう。

ありがとうございます。

Answer 1

// Direction we are already facing (without rotation) 
var forward = new Vector3(0,0,-1); 

// Direction we want to be facing (towards mouse pointer) 
var target = new Vector3().sub(mouse3D, box.position).normalize(); 

// Axis and 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)) = a 
axis.normalize(); 

// Overwrite rotation 
box.rotation.makeRotationAxis(axis, angle); 

代わりに、四元数を使用することができます。

// Overwrite rotation 
box.useQuaternion = true; 
box.quaternion.setFromAxisAngle(axis, angle);