three.js弧度角度转换及更改模型方向
- 弧度 = 角度 / 180 * Math.PI
- 角度 = 弧度 * 180 / Math.PI
- 角度 转 弧度 THREE.MathUtils.degToRad(deg)
- 弧度 转 角度 THREE.MathUtils.radToDeg (rad)
- π(弧度) = 180°(角度)
three.js中模型的rotation属性参数是弧度而不是角度,导致了模型增加弧度之后出现位置偏移问题
在three.js中切换方向发生模型位置大幅度偏移可以通过修改引入的3d模型的坐标来实现(建模工具里修改),确认问题可以在模型中添加自身的坐标系;
1. 四元数修改朝向
// const axesHelper = new THREE.AxesHelper(10); // this.model.children[i].add(axesHelper) // //飞机初始姿态飞行方向a // const a = new THREE.Vector3(0, 0, -1); // // 飞机姿态绕自身坐标原点旋转到b指向的方向 // const b = new THREE.Vector3(0, 0, 1).normalize(); // // a旋转到b构成的四元数 // const quaternion = new THREE.Quaternion(); // //注意两个参数的顺序 // quaternion.setFromUnitVectors(a, b); // // quaternion表示的是变化过程,在原来基础上乘以quaternion即可 // this.model.children[i].quaternion.multiply(quaternion);
2.rotation修改朝向
// Car.scene.rotation.x = 0; // Car.scene.rotation.y = 0; // Car.scene.rotation.z = 0; Car.scene即为model,也可以同时设置xyz修改朝向