Three.js中RingGeometry创建的行星环旋转后消失是什么原因？

问题根因 #

• THREE.Object3D的rotation.set()方法设计为直接接收三个数值参数，分别对应X、Y、Z轴的旋转弧度，你传入THREE.Vector3实例作为第一个参数，会导致旋转赋值异常：X轴旋转值为非法对象类型，Y、Z轴旋转值为undefined，最终行星环被旋转到相机视锥体可视范围外，因此无法看到。
• 你已经在材质中配置了side: THREE.DoubleSide，不存在单面渲染被剔除的问题，只要旋转参数正确即可正常显示。

修复方案 #

两种正确写法任选其一即可：

1. 直接传入三个弧度值，这是官方推荐的常用写法：

ring.rotation.set(Math.PI / 2, 0, 0);

2. 如果你需要通过THREE.Vector3实例传递旋转参数，调用copy方法赋值：

ring.rotation.copy(new THREE.Vector3(Math.PI / 2, 0, 0));

内容的提问来源于stack exchange，提问作者user824624