Thank you in advance for all the support as I've been asking a lot of questions about my project.
My project involves creating a simulation where a planet earth and moon rotate around a sun. (They're not exactly rotating around the sun, but more around the central axis where the sun is positioned).
I started by creating the geometries and adding them to the scene and then to the orbit group as shown below
var orbitGroup = new THREE.Object3D();
scene.add(orbitGroup);
scene.add(planetEarth);
orbitGroup.add(planetEarth);
scene.add(planetMoon);
orbitGroup.add(planetMoon);
Then, I set up the rotation within the render function like this
planetEarth.add( planetMoon );
planetEarth.add(rocketGroup);
// call the render function
var angle = 0;
render();
function render() {
stats.update();
// rotate the orbit group
angle += 0.002;
angle += 0.002 * controls.EarthRotationSpeed;
planetEarth.rotation.y += controls.EarthRotationSpeed;
planetMoon.rotation.y += controls.MoonRotationSpeed;
angle+= 0.01 * controls.SunRotationSpeed;
planetSun.rotation.y += controls.SunRotationSpeed;
// rotate the orbit group
angle += 0.02;
orbitGroup.rotation.y = -angle / 10;
littleOrbitGroup.rotation.x = -angle;
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
Currently, the moon and earth are orbiting around the sun instead of the moon revolving around the earth while it orbits the sun. Is there a way to specify the exact point or object that should be orbited and also customize the orbit axis rather than just the y-axis?
----------------EDIT-----------------
function createMesh(geom) {
var loader = new THREE.TextureLoader();
var planetTexture = loader.load("../assets/textures/planets/Earth.png");
var normalTexture = loader.load("../assets/textures/planets/EarthNormal.png");
var planetMaterial = new THREE.MeshPhongMaterial({map: planetTexture, bumpMap: normalTexture});
// create a multimaterial
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);
return mesh;
}