Three.js中如何旋转TorusGeometry实现土星环水平放置？

你的问题出在两个关键点：一是误用了不存在的rotate()通用方法，二是旋转的对象或时机不对。Three.js的几何体没有全局rotate()方法，必须指定旋转轴（rotateX/rotateY/rotateZ），更推荐直接旋转土星环的Mesh对象，操作更灵活。

两种正确解决方式： #

方式1：旋转Mesh对象（推荐）

在创建theSaturnRing实例后添加旋转代码，绕X轴旋转90度即可将垂直环转为水平：

var s_r = 0;
 
for ( var y2=1 ; y2<= SATURNSIZERING ; y2++ )
{
    var shapeSaturnRing = new THREE.TorusGeometry (800, 100, 100, 100); 
  
    var theSaturnRing = new THREE.Mesh( shapeSaturnRing );

    // 核心：旋转Mesh，将垂直环调整为水平
    theSaturnRing.rotateX(Math.PI / 2);

    theSaturnRing.position.x = 3500;
    theSaturnRing.position.z = 0;
    theSaturnRing.position.y = 0;

    var sr = AB.randomIntAtoB ( 6, 6);               
    theSaturnRing.material =  new THREE.MeshBasicMaterial ( { map: textureArray[sr] } );   

    ABWorld.scene.add(theSaturnRing);
    SATURNRING[p7] = theSaturnRing          
    s_r++; 
}

方式2：旋转几何体

如果要在几何体层面调整朝向，需使用指定轴的旋转方法，在创建Mesh前执行：

var s_r = 0;
 
for ( var y2=1 ; y2<= SATURNSIZERING ; y2++ )
{
    var shapeSaturnRing = new THREE.TorusGeometry (800, 100, 100, 100); 
    // 核心：绕X轴旋转90度，修正几何体初始朝向
    shapeSaturnRing.rotateX(Math.PI / 2);
  
    var theSaturnRing = new THREE.Mesh( shapeSaturnRing );

    theSaturnRing.position.x = 3500;
    theSaturnRing.position.z = 0;
    theSaturnRing.position.y = 0;

    var sr = AB.randomIntAtoB ( 6, 6);               
    theSaturnRing.material =  new THREE.MeshBasicMaterial ( { map: textureArray[sr] } );   

    ABWorld.scene.add(theSaturnRing);
    SATURNRING[p7] = theSaturnRing          
    s_r++; 
}

原理说明： #

默认TorusGeometry生成的环是绕Y轴的，也就是垂直于X-Z平面（呈现垂直状态）。绕X轴旋转90度后，环会平铺在X-Z平面上，符合土星环的水平视觉效果。

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