solar_system / three

console.clear()
var planetSpeedLimiter = 12;
var align = false;
var planets = {
sun:{
radius: 1.0,
orbitRadius: 0.0,
angleSpeed: 0.0,
color: 0xffaf01,
trail: []
},
mercury:{
radius: 0.059,
orbitRadius: 0.62 + 0.6,
angleSpeed: Math.PI/9.4,
color: 0xff8101,
trail: []
},
venus:{
radius: 0.093,
orbitRadius: 0.85 + 0.6,
angleSpeed: Math.PI/15.0,
color: 0xca8907,
trail: []
},
earth:{
radius: 0.096,
orbitRadius: 1.0 + 0.7,
angleSpeed: Math.PI/19.1,
color: 0x0167ff,
trail: []
},
mars:{
radius: 0.070,
orbitRadius: 1.23 + 0.7,
angleSpeed: Math.PI/26.2,
color: 0xff3b01,
trail: []
},
jupiter:{
radius: 0.320,
orbitRadius: 2.28 + 0.5,
angleSpeed: Math.PI/65.8,
color: 0xffc945,
trail: []
},
saturn:{
radius: 0.294,
orbitRadius: 3.09 + 0.5,
angleSpeed: Math.PI/103.7,
color: 0xffe6ab,
trail: [],
ringWidth: 0.04,
ringColor: 0x56544e
},
uranus:{
radius: 0.192,
orbitRadius: 4.38 + 0.5,
angleSpeed: Math.PI/174.9,
color: 0x00a576,
trail: [],
ringWidth: 0.01,
ringColor: 0xc7f3f5
},
neptune:{
radius: 0.189,
orbitRadius: 5.49 + 0.5,
angleSpeed: Math.PI/244.5,
color: 0x0a33ff,
trail: []
},
pluto:{
radius: 0.041,
orbitRadius: 6.29 + 0.5,
angleSpeed: Math.PI/301.0,
color: 0xbca88c,
trail: []
}
}

// World Configurations
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x131010 );
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;

var camera = new THREE.OrthographicCamera( winWidth / - 100, winWidth / 100, winHeight / 100, winHeight / -100, - 500, 1000);
//var camera = new THREE.PerspectiveCamera( 75, winWidth / winHeight, 1, 1000 );

camera.position.x = 0.0;
camera.position.y = 7.0;
camera.position.z = 0.0;
camera.lookAt(new THREE.Vector3(0, 0, 0));

var renderer = new THREE.WebGLRenderer({antialias:true, preserveDrawingBuffer: false});
renderer.autoClear = false;
renderer.setClearColor("#000000");
renderer.setSize( winWidth, winHeight );
document.body.appendChild( renderer.domElement );

// Add in planets and sun
var sunmaterial = new THREE.MeshBasicMaterial( {
color: planets.sun.color,
wireframe: false
} );
for (var planetName in planets) {
var planet = planets[planetName];
var geometry = new THREE.SphereGeometry( planet.radius, 50, 50 );
var planetmaterial = new THREE.MeshBasicMaterial( {
color: planet.color,
wireframe: false,
} );
if (planetName == 'sun'){
var mesh = new THREE.Mesh( geometry, sunmaterial );
} else {
var mesh = new THREE.Mesh( geometry, planetmaterial );
}

if (planetName == 'saturn' || planetName == 'uranus') {

var ringGeometry = new THREE.TorusGeometry( planet.radius + 0.1, planet.ringWidth, 18, 100 );
var ringMaterial = new THREE.MeshBasicMaterial( {
color: planet.ringColor,
side: THREE.DoubleSide
} );
var ringMesh = new THREE.Mesh( ringGeometry, ringMaterial );
ringMesh.rotation.y = Math.PI/4
ringMesh.rotation.x = Math.PI/4

planetGroup = new THREE.Group();
planetGroup.add(mesh);
planetGroup.add(ringMesh);

planet.mesh = planetGroup;
scene.add( planetGroup );

}
else {
mesh.position.set(planet.orbitRadius, 0, 0);
}

// Orbit Ring
var torusgeometry = new THREE.TorusGeometry( planet.orbitRadius, 0.01, 18, 100 );
var torusmaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
torusmaterial.transparent = true;
torusmaterial.opacity = 0.3;
var torus = new THREE.Mesh( torusgeometry, torusmaterial );


if (planetName == 'earth1'){
planets.earth.mesh.position.y = 1.0
torus.rotation.y = Math.PI / 4
}
torus.rotation.x = Math.PI / 2
scene.add( torus );

planet.torus = torus;
planet.angle = Math.PI/2; //Math.random() * 2 * Math.PI;
if (planetName != 'saturn' && planetName != 'uranus'){
planet.mesh = mesh;
scene.add( mesh );
}
}

//Light
var sunlight = new THREE.PointLight( 0xffffff, 1, 100 );
sunlight.position.set( 0, 10.0, 0 );
scene.add( sunlight );

// Grid
var size = 50;
var divisions = 10;
var gridHelper = new THREE.GridHelper( size, divisions, 0xff0000 );
//scene.add( gridHelper );
var sphereSize = 1;
var pointLightHelper = new THREE.PointLightHelper( sunlight, sphereSize );
//scene.add( pointLightHelper );

// Render Loop
var render = function () {
requestAnimationFrame( render );
for (var planetName in planets) {
var p = planets[planetName];

if (planetName == 'earth1') {
p.mesh.position.y = p.orbitRadius * Math.sin(p.angle)
}
p.mesh.position.x = p.orbitRadius * Math.sin(p.angle)
p.mesh.position.z = p.orbitRadius * Math.cos(p.angle)
p.angle += p.angleSpeed/planetSpeedLimiter;
}
camera.lookAt(new THREE.Vector3(0, 0, 0));
renderer.render(scene, camera);
};

render();
setTimeout(panDown, 3000)

var panCounter = 0.2
function panDown(){
if (camera.position.z <= 20.0){
//sunlight.position.z += 0.05
camera.position.z += panCounter
if (panCounter > 0.02){
panCounter -= 0.001
}
setTimeout(panDown, 10);
} else {
//$('#o1').css({'animation': 'type 2s forwards'});
//$('#o2').css({'animation': 'type 1s forwards 1.5s'});
}
}

// P5 map function
var map = function(n, start1, stop1, start2, stop2) {
return ((n-start1)/(stop1-start1))*(stop2-start2)+start2;
};

$(document).on('click', function(event){
var pageX = event.pageX;
var pageY = event.pageY;

if (align == false){
align = true;
planetSpeedLimiter = 1.0;
} else {
align = false;
planetSpeedLimiter = 12.0;
}
});

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

function onResize() {
winWidth = window.innerWidth;
winHeight = window.innerHeight;

var prevX = camera.position.x;
var prevY = camera.position.y;
var prevZ = camera.position.z;

camera = new THREE.OrthographicCamera( winWidth / - 100, winWidth / 100, winHeight / 100, winHeight / -100, - 500, 1000);
//camera.position.x = 0.0;
//camera.position.y = 7.0;
//camera.position.z = 0.0;
camera.position.x = prevX;
camera.position.y = prevY;
camera.position.z = prevZ;
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}