为何Three.js中旋转90度后视觉效果不符合预期？

核心问题 #

Three.js中Mesh.rotation的属性值要求是弧度（Radians），而非你传入的角度数值。直接设置90的话，相当于让圆柱旋转了90弧度（约5156度），远超出预期的90度，所以视觉效果不符合预期。

两种修正方案 #

方案一：直接使用弧度值赋值 #

90度对应的弧度是Math.PI / 2，直接替换角度数值即可：

// 绕Z轴旋转90度（使用弧度值）
mainCylinderMesh.rotation.z = Math.PI / 2;
// 或用set方法统一设置三个轴的旋转
mainCylinderMesh.rotation.set(0, 0, Math.PI / 2);

方案二：用Three.js工具函数转换角度到弧度 #

Three.js内置了THREE.MathUtils.degToRad()工具函数，可直接将角度转为弧度：

// 先导入Three.js（如果未全局引入）
import * as THREE from 'three';

// 将90度转为弧度后赋值
mainCylinderMesh.rotation.z = THREE.MathUtils.degToRad(90);
// 或用set方法
mainCylinderMesh.rotation.set(0, 0, THREE.MathUtils.degToRad(90));

替换旋转代码后，圆柱会绕自身中心Z轴准确旋转90度，符合预期效果。

内容的提问来源于stack exchange，提问作者Eli-ott