[Three.js] 쿼터니언을 사용하여 임의의 방향으로 객체를 향합니다.

지금 제작중인 것으로, 둥근 그림자를 지면에 더해 지면의 법선 방향으로 향하게 한다는 것을 하고 싶었다.
법선 자체는 곧바로 취할 수 있었지만, Plane을 어떻게 그 법선 방향으로 향하게 할까, 하는 것을 이 기사 를 참고로 해 만들어 보았다.

테스트용으로 법선 방향과 오브젝트의 방향을 테스트하는 것을 만들었으므로, 그것을 베이스에 메모를 남겨 둔다.

샘플

htp : // js. t / ed_m18 / tfJW

샘플은 이런 느낌으로, 머리를 임의의 벡터에 따르게 한다, 라고 하는 것.
x, y, z 축의 위치에서 슬라이더를 만지면 그에 따라 객체가 회전합니다.

흐름

먼저 흐름을 쓰면,

가리키고 싶은 벡터와 "위쪽"방향 벡터를 가져옵니다

위의 두 벡터와의 외적을 취합니다 (이것은 회전축이됩니다)

위의 두 벡터의 각도를 내적을 사용하여 얻습니다

이러한 정보를 바탕으로 회전을위한 쿼터니온을 생성합니다

생성된 쿼터니언을 객체에 적용

라는 흐름.
「위」라고 쓴 것은 반드시 하늘 방향이 아니고, 오브젝트의 「상」이 되는 벡터.
Three.js를 사용한 샘플 코드를 발췌하면 다음과 같다.

샘플 코드

Threejs-sample.js

//「上」方向のベクトルを生成。サンプルでは「空」方向。
var up = new THREE.Vector3(0, 1, 0);

//法線ベクトルを取得。サンプルではinput要素から取得。
var normalAxis = new THREE.Vector3(+xInp.value, +yInp.value, +zInp.value).normalize();

//回転軸用のベクトルを生成
var dir = new THREE.Vector3();

//「上」方向と法線ベクトルとの外積を計算。正規化。
dir.crossVectors(up, normalAxis).normalize();

//上記ベクトルとの内積（cosθ）
var dot = up.dot(normalAxis);// / (up.length() * normalAxis.length());

//acos関数を使ってラジアンに変換。
var rad = Math.acos(dot);

//クォータニオンオブジェクトを生成
var q = new THREE.Quaternion();

//計算した回転軸と角度を元にクォータニオンをセットアップ
q.setFromAxisAngle(dir, rad);

//適用したいオブジェクトに回転を適用
mesh.rotation.setFromQuaternion(q);

Three.js를 사용하면 쿼터니언이라든지 그 외 여러가지의 귀찮은 계산을 해 주는 클래스가 있으므로, 이 정도의 행수로 간단하게 할 수 버립니다.