Any suggestions for rotating a (THREE.mesh) 3D object around another object that is already rotating on an axis?

Question

Any suggestions for rotating a (THREE.mesh) 3D object around another object that is already rotating on an axis?

I am trying to create a simulation where a moon orbits around a planet that is itself orbiting around a sun.

Using three.js, I have successfully set up the Earth rotating around the Sun. However, I am facing challenges in making the Moon rotate around the already rotating Earth.

sun = models['sun'];
earth = models['earth'];
moon = models['moon'];

let suns = new THREE.Group();
suns.add(sun);

let planets = new THREE.Group();
planets.add(earth);

let moons = new THREE.Group();
moons.add(moon);

scene.add(sun);
scene.add(earth);
scene.add(moon);

var orbit = 3;
var date = Date.now() * 0.0005;

earth.position.set(Math.cos(date) * orbit, 0, Math.sin(date) * orbit);

earth.rotation.y += 0.01*animation_speed;
moon.rotation.y += 0.01*animation_speed;

Desired Outcome: The Earth should rotate around the Sun (stationary), with the Moon revolving around the Earth as it revolves around the Sun.

Current Status: The Earth rotates around the Sun but unsure how to proceed with the Moon's rotation...

javascript three.js hierarchy 3d-model

Answer 1

Answer №1

Creating a hierarchy of objects will simplify the rotation process as they rotate around their parent objects.

It's important to note that your groups are not functioning as intended: when you add an object to a group and then to the scene, it is removed from the group and added directly to the scene. For this example, we will avoid using groups altogether.

For instance:

const sun = models['sun'];
const earth = models['earth'];
const moon = models['moon'];

const sunContainer = new THREE.Object3D
sunContainer.add(sun)
const earthContainer = new THREE.Object3D
earthContainer.add(earth)
const moonContainer = new THREE.Object3D
moonContainer.add(moon)

scene.add(sunContainer); // sunContainer becomes child of scene
sunContainer.add(earthContainer); // earthContainer becomes child of sunContainer
earthContainer.add(moonContainer); // moonContainer becomes child of earthContainer

var earthOrbitRadius = 3;
var moonOrbitRadius = 0.2;

// position objects at their respective orbit radius (relative to their parents)
earthContainer.position.set(earthOrbitRadius, 0, 0);
moonContainer.position.set(moonOrbitRadius, 0, 0);

// each object rotates around its axis
sun.rotation.y += 1*animation_speed;
earth.rotation.y += 1*animation_speed;
moon.rotation.y += 1*animation_speed;

// each object orbits around its parent
sunContainer.rotation.y += 0.1*animation_speed;
earthContainer.rotation.y += 0.1*animation_speed;

Reintegrate these changes into your code and adjust values accordingly for desired results.

There are alternative methods to achieve similar effects such as adjusting planet rotation in relation to orbit rotation or using a physics engine like Bullet Physics within Three.js. You can also explore pivot points for more flexibility.

Providing working code would greatly aid in troubleshooting. :)

Answer 2

Creating a hierarchy of objects will simplify the rotation process as they rotate around their parent objects.

It's important to note that your groups are not functioning as intended: when you add an object to a group and then to the scene, it is removed from the group and added directly to the scene. For this example, we will avoid using groups altogether.

For instance:

const sun = models['sun'];
const earth = models['earth'];
const moon = models['moon'];

const sunContainer = new THREE.Object3D
sunContainer.add(sun)
const earthContainer = new THREE.Object3D
earthContainer.add(earth)
const moonContainer = new THREE.Object3D
moonContainer.add(moon)

scene.add(sunContainer); // sunContainer becomes child of scene
sunContainer.add(earthContainer); // earthContainer becomes child of sunContainer
earthContainer.add(moonContainer); // moonContainer becomes child of earthContainer

var earthOrbitRadius = 3;
var moonOrbitRadius = 0.2;

// position objects at their respective orbit radius (relative to their parents)
earthContainer.position.set(earthOrbitRadius, 0, 0);
moonContainer.position.set(moonOrbitRadius, 0, 0);

// each object rotates around its axis
sun.rotation.y += 1*animation_speed;
earth.rotation.y += 1*animation_speed;
moon.rotation.y += 1*animation_speed;

// each object orbits around its parent
sunContainer.rotation.y += 0.1*animation_speed;
earthContainer.rotation.y += 0.1*animation_speed;

Reintegrate these changes into your code and adjust values accordingly for desired results.

There are alternative methods to achieve similar effects such as adjusting planet rotation in relation to orbit rotation or using a physics engine like Bullet Physics within Three.js. You can also explore pivot points for more flexibility.

Providing working code would greatly aid in troubleshooting. :)

Answer 3

Answer №2

I have created a straightforward example to demonstrate the hierarchy of THREE.Object3D and how children are related to their "parents" in terms of positions and rotations.

var scene = new THREE.Scene();
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
solarsystem.forEach(d => create(d, scene))
scene.add(sphere({radius:5, orbit:0}))

function create(d, target) {
   var o = new THREE.Object3D(d.name);
   o.add(orbit(d));
   let p = sphere(d)
   o.add(p);
   d.satellites && d.satellites.forEach(d1 => create(d1, p))
   target.add(o);
   d.o=o; 
}

function orbit(d) {
    var o = new THREE.Object3D('orbit '+d.name);
    o.rotateX(Math.PI/2);
    o.add( new THREE.Line( 
        new THREE.CircleGeometry( d.orbit, 64 ), 
        new THREE.LineBasicMaterial( { color: 0xffffff } ) ));
    return o;
}

function sphere(d){
    var o = new THREE.Object3D('sphere '+d.name);
    o.add(new THREE.Mesh( 
        new THREE.SphereGeometry(d.radius, 16, 16), 
        new THREE.MeshBasicMaterial({ 
            color: 0x2980b9, wireframe: true 
        })));
    o.translateX(d.orbit)
    return o;
}

var grid = new THREE.GridHelper(500, 100, 0x666666, 0x444444)
grid.rotateY(Math.PI/2);
scene.add(grid);
camera.position.set(5,5,0);

new THREE.OrbitControls( camera, renderer.domElement );

let t = 0;

function render(dt) {
    let t2= dt-t;
    requestAnimationFrame( render );
    renderer.render( scene, camera );
    solarsystem.forEach(upd)
    t = dt;
    
    function upd(d) {
        d.o.rotateY(t2/10000*d.speed);
        d.satellites && d.satellites.forEach(upd)
    }
}

requestAnimationFrame( render );

body, canvas { 
  margin: 0;  
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
    let solarsystem = [{
        name: 'earth', radius: 2, orbit: 30, speed: 2,
        satellites: [{
            name: 'moon', radius: 1, orbit: 6, speed: 1,
        }]
    }, {
        name: 'mars', radius: 2, orbit: 50, speed: 1,
        satellites: [{
            name: 'phobos', radius: 0.5, orbit: 3, speed: 1,
        }, {
            name: 'deimos', radius: 0.5, orbit: 4, speed: 3,
        }]
    }];
</script>

Answer 4

I have created a straightforward example to demonstrate the hierarchy of THREE.Object3D and how children are related to their "parents" in terms of positions and rotations.

var scene = new THREE.Scene();
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
solarsystem.forEach(d => create(d, scene))
scene.add(sphere({radius:5, orbit:0}))

function create(d, target) {
   var o = new THREE.Object3D(d.name);
   o.add(orbit(d));
   let p = sphere(d)
   o.add(p);
   d.satellites && d.satellites.forEach(d1 => create(d1, p))
   target.add(o);
   d.o=o; 
}

function orbit(d) {
    var o = new THREE.Object3D('orbit '+d.name);
    o.rotateX(Math.PI/2);
    o.add( new THREE.Line( 
        new THREE.CircleGeometry( d.orbit, 64 ), 
        new THREE.LineBasicMaterial( { color: 0xffffff } ) ));
    return o;
}

function sphere(d){
    var o = new THREE.Object3D('sphere '+d.name);
    o.add(new THREE.Mesh( 
        new THREE.SphereGeometry(d.radius, 16, 16), 
        new THREE.MeshBasicMaterial({ 
            color: 0x2980b9, wireframe: true 
        })));
    o.translateX(d.orbit)
    return o;
}

var grid = new THREE.GridHelper(500, 100, 0x666666, 0x444444)
grid.rotateY(Math.PI/2);
scene.add(grid);
camera.position.set(5,5,0);

new THREE.OrbitControls( camera, renderer.domElement );

let t = 0;

function render(dt) {
    let t2= dt-t;
    requestAnimationFrame( render );
    renderer.render( scene, camera );
    solarsystem.forEach(upd)
    t = dt;
    
    function upd(d) {
        d.o.rotateY(t2/10000*d.speed);
        d.satellites && d.satellites.forEach(upd)
    }
}

requestAnimationFrame( render );

body, canvas { 
  margin: 0;  
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
    let solarsystem = [{
        name: 'earth', radius: 2, orbit: 30, speed: 2,
        satellites: [{
            name: 'moon', radius: 1, orbit: 6, speed: 1,
        }]
    }, {
        name: 'mars', radius: 2, orbit: 50, speed: 1,
        satellites: [{
            name: 'phobos', radius: 0.5, orbit: 3, speed: 1,
        }, {
            name: 'deimos', radius: 0.5, orbit: 4, speed: 3,
        }]
    }];
</script>

Any suggestions for rotating a (THREE.mesh) 3D object around another object that is already rotating on an axis?

Answer №1

Answer №2

Similar questions

Creating TypeScript modules for npm

What is the reason behind the ability to omit the arrow function and method argument in RxJS subscribe?

The number of files being uploaded by my code keeps increasing when it should only be uploading a single file

Adjust the position of an image to move it closer to the top using CSS

Is it possible that react-gtm-module is generating a faulty source path?

What could be the reason for Safari generating larger videos than Chrome when utilizing the MediaDevices.getUserMedia() API?

No visuals render with Three.js

ASP.net bundling causing issues with script rendering and display

Transferring Shadertoy creations into Three.js

Refresh the table following the removal of an item

Unlimited height dialog overlay exclusive to Facebook

Refreshing JWT Authentication in Angular

Passing data from a card component to a tab component in ReactJS

Tips for avoiding the Basic Authentication popup

Is there a way to effortlessly zoom in on a Google map with just one mouse click?

Organize the words within HTML elements without considering the tags

Encountered an error: Unable to access property 'tween' of an undefined variable in the Masterslider.js script

Navigate directly to a designated element in a React component without the need to scroll when clicking a link

Querying MongoDB with a JavaScript file for formatting datetime values

Can the parcel bundler dist folder be customized for decoration?