Rotating a 3D shape in Javascript

November 25, 2022

Working on a simple 3D browser game which includes all the planets in our solar system. As you may know Saturn has a ring around it. In this case I’m using the built in Torus function to make my ring. For some reason the ring is placed vertically instead of horizontally. Ive been trying to use .rotate() to make it horizontally but can’t get it to work.
Here is my code:


var s_r = 0;
 
 for ( var y2=1 ; y2<= SATURNSIZERING ; y2++ )
 {
    var shapeSaturnRing = new THREE.TorusGeometry (800, 100, 100, 100); 
    //shapeSaturnRing.rotate(45 * Math.PI / 180); <- (Here is how I try to rotate)
  
    var theSaturnRing = new THREE.Mesh( shapeSaturnRing );

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

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

    ABWorld.scene.add(theSaturnRing);
    SATURNRING[p7] = theSaturnRing          // save it for later
    s_r++; 
 }

Where should I input the rotate function to flip it?
Thanks in advance!

>Solution :

Instead of .rotate() try to use Object3D.rotation which is the base class for most objects in three.js and provides a set of properties and methods for manipulating objects in 3D space.

https://threejs.org/docs/#api/en/core/Object3D.rotation

https://jsfiddle.net/mlkn/per5jzr4/2/