The moon orbits the earth as the earth orbits around the sun. While trying to maintain the matrix4 methods, I attempted to achieve this through matrix multiplication but encountered some difficulties in changing the order of multiplication.
// Solar System Simulation
window.onload = function()
{
var scene = new THREE.Scene();
// Setting up camera
var camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,innerHeight);
document.body.appendChild(renderer.domElement);
// Create sun with specified geometry
var sun_geometry = new THREE.SphereGeometry(1,32,32);
var sun_material = new THREE.MeshLambertMaterial( {color: 0xff0000} );
var sun = new THREE.Mesh(sun_geometry,sun_material);
sun.matrixAutoUpdate = false;
scene.add(sun);
// Create earth with specific geometry
var earth_geometry = new THREE.SphereGeometry(0.5,32,32);
var earth_material = new THREE.MeshLambertMaterial( {color: 0x0000ff} );
var earth = new THREE.Mesh(earth_geometry,earth_material);
earth.matrixAutoUpdate = false;
scene.add(earth);
// Create moon with specified geometry
var moon_geometry = new THREE.SphereGeometry(0.25,32,32);
var moon_material = new THREE.MeshLambertMaterial( {color: 0x00ffff} );
var moon = new THREE.Mesh(moon_geometry,moon_material);
moon.matrixAutoUpdate = false;
scene.add(moon);
// Light setup
var system_light = new THREE.DirectionalLight( 0xffffff, 0.4);
system_light.position.set(0.5,0,1).normalize();
var sun_light = new THREE.PointLight( 0xffffff, 1, 100);
sun_light.position.set(1,1,0).normalize();
// Adding lights to scene
scene.add(system_light);
sun.add(sun_light);
// Rendering function
var render = function()
{
// Calculating delta time
var now = new Date();
var dt = now-(render.time || now);
render.time = now;
renderer.render(scene,camera);
var sun_rotation_matrix = new THREE.Matrix4().makeRotationY(0.001*render.time);
var earth_rotation_matrix = new THREE.Matrix4().makeRotationY(0.002*render.time);
var earth_translation_matrix = new THREE.Matrix4().makeTranslation(4,0,0);
earth.matrix = earth_rotation_matrix.multiply(earth_translation_matrix);
// Potential issues here
var moon_rotation_matrix = new THREE.Matrix4().makeRotationY(0.004*render.time);
var moon_translation_matrix = new THREE.Matrix4().makeTranslation(1,0,0);
moon.matrix = moon_translation_matrix.multiply(earth_rotation_matrix).multiply(moon_rotation_matrix);
requestAnimationFrame(render);
}
render(); // Start rendering
}