# 关于 Threejs 模型旋转问题(笔记)

### 欧拉角旋转的问题

https://threejs.org/examples/...

https://codepen.io/jonnybonif...

``````function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.04;
mesh.rotation.y += 0.04;
renderer.render(scene, camera);
}``````

### 四元数

Understanding Quaternions 中文翻译《理解四元数》

(别来问我具体的推导是怎么回事, 我解释不清楚的, 随便看看吧...)
https://gist.github.com/jiyin...
https://gist.github.com/cheny...

### 相关代码

three.js 提供了四元数(Quaternion) API 用于完成四元数计算:
https://threejs.org/docs/#api...

http://projects.defmech.com/T...

``````function rotateMatrix(rotateStart, rotateEnd) {
var axis = new THREE.Vector3(),
quaternion = new THREE.Quaternion();

var angle = Math.acos(
rotateStart.dot(rotateEnd) / rotateStart.length() / rotateEnd.length()
);

if (angle) {
axis.crossVectors(rotateStart, rotateEnd).normalize();
angle *= rotationSpeed;
quaternion.setFromAxisAngle(axis, angle);
}
return quaternion;
}``````

``````var deltaRotationQuaternion = new three.Quaternion()
.setFromEuler(new three.Euler(
0,
'XYZ'
));

cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);``````

https://gist.github.com/cecil...

``````plugins:[
new webpack.ProvidePlugin({
'THREE': 'three'
}),
//...
]``````
``import "three/examples/js/loaders/GLTFLoader.js";``