Axial tilt

sphere

by Paul West

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var camera, scene, renderer, controls;
var earth, earth_container, lookAtPos;
init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(25, 1, 0);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

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

  var light = new THREE.PointLight(0xffffff);
  scene.add(light);
  var ambient = new THREE.AmbientLight(0x404040);
  scene.add(ambient);
  
  var gridGeom = new THREE.PlaneGeometry(22,22, 22,22);
  gridGeom.rotateX(THREE.Math.degToRad(-90));
  var gridMat = new THREE.MeshBasicMaterial({color:0x555555, wireframe:true});
  var grid = new THREE.Mesh(gridGeom, gridMat);
  //scene.add(grid);
  
  var sunGeom = new THREE.SphereGeometry(2, 16, 8);
  var sunMat = new THREE.MeshBasicMaterial({color:"gold"});
  var sun = new THREE.Mesh(sunGeom, sunMat);
  scene.add(sun);
  
  var shape = new THREE.Shape();
  shape.moveTo(orbit, 0);
  shape.absarc(0, 0, 10, 0, 2 * Math.PI, false);
  var spacedPoints = shape.createSpacedPointsGeometry(128);
  spacedPoints.rotateX(THREE.Math.degToRad(-90));
  var orbit = new THREE.Line(spacedPoints, new THREE.LineBasicMaterial({
    color: 0x00ff00
  }));
  scene.add(orbit);
  
  var earthGeom = new THREE.SphereGeometry(1,16,8);
  var earthMat = new THREE.MeshLambertMaterial({color:"white", transparent: true, opacity: 0.95});
	earth = new THREE.Mesh(earthGeom, earthMat);
  
  var edges = new THREE.EdgesGeometry(earthGeom);
  var lines = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color:'purple'}));
  earth.add(lines);
  
  var axisGeom = new THREE.Geometry();
  axisGeom.vertices.push(new THREE.Vector3(0,1.5,0));
  axisGeom.vertices.push(new THREE.Vector3(0,-1.5,0));
  var axis = new THREE.Line(axisGeom, new...