# [[Three.js]] における回転
ふた通り。
- [[3 × 3 回転行列|オイラー角]]による指定
- [[3 × 3 回転行列|クォータニオン]]の利用
## オイラー角による指定
[[度数法と弧度法|ラジアン (radian)]] で指定する。
```js
radian = degree * Math.PI / 180
```
$\alpha$, $\beta$, $\gamma$ は[[度数法と弧度法|ラジアン]]。
```js
obj.rotation.set(α, β, γ);
```
または。
```js
obj.rotation.z = γ;
obj.rotation.y = β;
obj.rotation.x = α;
```
順番に注意。
Three.js は z - y - x （たぶん）
- [[ジンバルロック]]が起こる可能性がある
- x, y, z ごとに各 1 回しか回転できない
- 複数回なら行列を使う
## クォータニオンの利用
[[ジンバルロック]]が起こらない。
↓ 古い書き方（新しいバージョンでは書かなくてよい）
```js
obj.useQuoternion = true;
```
[[同時変換行列]]を利用する場合。
```js
const matrix = new THREE.Matrix4();
matrix.set(
m.rot_0, m.rot_1, m.rot_2, m.pos_x,
m.rot_3, m.rot_4, m.rot_5, m.pos_y,
m.rot_6, m.rot_7, m.rot_8, m.pos_z,
0, 0, 0, 1
);
// クォータニオンに変換
const quaternion = new THREE.Quaternion();
quaternion.setFromRotationMatrix(matrix);
// Three.js のオブジェクトにクォータニオンを適用
obj.quaternion.copy(quaternion);
```
### Example
[Marker 3D - Multi w/ quaternion](https://codepen.io/hibi-myzk/pen/JjxwqVw)