Earth Moon

by Gregg Tavares

JavaScript

var container, stats;

var camera, scene, renderer;

var geometry, group;
var earthBase, moonBase, earth, moon;

var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

  container = document.createElement('div');
  document.body.appendChild(container);
  document.addEventListener( 'mousemove', onDocumentMouseMove, false );

  camera = new THREE.PerspectiveCamera(
    60, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;

  scene = new THREE.Scene();

  var geometry = new THREE.SphereGeometry(1);
  var material = new THREE.MeshNormalMaterial({ overdraw: 0.5 });

  
  earthBase = new THREE.Object3D();
  moonBase = new THREE.Object3D();
  earth = new THREE.Mesh(geometry, material);
  moon = new THREE.Mesh(geometry, material);

  earthBase.add(earth);
  earthBase.add(moonBase);
  moonBase.add(moon);

  earth.scale.x = 150;
  earth.scale.y = 150;
  earth.scale.z = 150;
  
  moon.scale.x = 30;
  moon.scale.y = 30;
  moon.scale.z = 30;
    
  moon.position.z = 250; // moon orbit radius    

  scene.add(earthBase);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.sortObjects = false;
  container.appendChild(renderer.domElement);

  //

  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

function onDocumentMouseMove(event) {

  mouseX = (event.clientX - windowHalfX) * 10;
  mouseY = (event.clientY - windowHalfY) * 10;

}

//

function animate() {

  requestAnimationFrame(animate);

  render();

}

function render() {

  camera.position.x += (mouseX - camera.position.x) * .05;
  camera.position.y += (- mouseY -...