Skip to content

Instantly share code, notes, and snippets.

@SabrinaMarkon

SabrinaMarkon/index.html

Last active March 23, 2019 04:34
Show Gist options
  • Save SabrinaMarkon/0d3c3d2d92272e730916692963c41a1a to your computer and use it in GitHub Desktop.
Save SabrinaMarkon/0d3c3d2d92272e730916692963c41a1a to your computer and use it in GitHub Desktop.
Download ZIP
Three.js Earth and Moon Orbit #2 - https://jsbin.com/fofumun
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!--<script src="https://getfirebug.com/firebug-lite-debug.js"></script>-->
<meta name="description" content="Three.js Earth and Moon Orbit #2" />
<meta charset="utf-8" />
<title>Three.js Earth and Moon Orbit #2</title>
<style>
#container {
background: #000000;
width: 100%;
height: 100%;
}
</style>
<meta charset=utf-8 />
<style id="jsbin-css">
</style>
</head>
<body>
<div id="container">
</div>
</body>
<script>
'use strict';
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.2/math.min.js"></script>
<script>
// set the scene size
const WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
// set some camera attributes
const VIEW_ANGLE = 30, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 10000;
// get the DOM element to attach to
const $container = $('#container');
// create a WebGL renderer, camera, and a scene
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
let clock = new THREE.Clock();
const camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
// the camera starts at 0,0,0 so pull it back
camera.position.z = 600;
// add the camera to the scene
scene.add(camera);
// set up the camera controls so the user can rotate the scene with their mouse.
const cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
cameraControls.autoRotate = false;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
// LIGHTING:
/* "a HemisphereLight takes a sky color and a ground color and just multplies
the material's color between those 2 colors" (ThreeJSFundamentals.org, n.d.) */
const hlightskyColor = 0x87CEFA; // coming from above - light blue
const hlightgroundColor = 0x00BFFF; // coming from below - deep sky blue
const hlightintensity = 0.3;
const hemispherelight = new THREE.HemisphereLight(hlightskyColor, hlightgroundColor, hlightintensity);
scene.add(hemispherelight);
// a DirectionalLight light often represents the sun and we need it here to combine with the
// hemisphere or ambient light to shade.
const dlightcolor = 0xFFFACD;
const dlightintensity = 1.2;
const directionallight = new THREE.DirectionalLight(dlightcolor, dlightintensity);
directionallight.position.set(20, 10, 10);
directionallight.target.position.set(0, 0, 0); // light shines in direction of its target (deafults to origin)
directionallight.castShadow = true;
scene.add(directionallight);
// shows a plane, to represent the light, and a line from the light to the target (ThreeJSFundamentals.org, n.d.)
const dlighthelper = new THREE.DirectionalLightHelper(directionallight);
scene.add(dlighthelper);
// GEOMETRY:
// set up the sphere properties.
const segments = 32, rings = 32, earthradius = 45, moonradius = 10, starsradius = 100;
// STAR FIELD - scene background.
const starsloader = new THREE.TextureLoader();
starsloader.crossOrigin = '';
const starsjpg = starsloader.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/stars.jpg',
function ( texture ) {
var img = texture.image;
bgWidth= img.width;
bgHeight = img.height;
}
);
// Add the background texture to the scene's background property.
scene.background = starsjpg;
// make sure the background image is resized to fill the scene.
starsjpg.wrapS = THREE.MirroredRepeatWrapping;
starsjpg.wrapT = THREE.MirroredRepeatWrapping;
const starsGeometry = new THREE.Geometry();
for ( let i = 0; i < 50000; i ++ ) {
let star = new THREE.Vector3();
star.x = THREE.Math.randFloatSpread( 2000 );
star.y = THREE.Math.randFloatSpread( 2000 );
star.z = THREE.Math.randFloatSpread( 2000 );
starsGeometry.vertices.push( star );
}
const starsMaterial = new THREE.PointsMaterial( { color: 0xffffff } );
const sparklestars = new THREE.Points( starsGeometry, starsMaterial );
scene.add( sparklestars ); // (Three.js, n.d.)
// EARTH Sphere - add earth texture map.
const earthloader = new THREE.TextureLoader();
earthloader.crossOrigin = '';
const earthjpg = earthloader.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/earthtexturemap.jpg');
const earthMaterial = new THREE.MeshPhongMaterial({map: earthjpg});
const earth = new THREE.Mesh(
new THREE.SphereGeometry(earthradius, segments, rings),
earthMaterial);
earth.position.set(0, 0, 0);
earth.rotation.y = 23.5;
earth.receiveShadow = true;
earth.castShadow = true;
// MOON Sphere - add moon texture map.
const moonloader = new THREE.TextureLoader();
moonloader.crossOrigin = '';
const moonjpg = moonloader.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/moontexturemap.jpg');
const moonMaterial = new THREE.MeshPhongMaterial({map: moonjpg});
const moon = new THREE.Mesh(
new THREE.SphereGeometry(moonradius, segments, rings),
moonMaterial);
moon.position.set(-90, 0, 0);
moon.receiveShadow = true;
moon.castShadow = true;
// ORBIT Line - create a circular line for the moon's orbit around the earth.
const linematerial = new THREE.LineBasicMaterial();
const circlegeometry = new THREE.CircleGeometry(3.2, 1000);
circlegeometry.vertices.shift();
const orbitpath = new THREE.Line(circlegeometry, linematerial);
orbitpath.position.set(0.5, 5, 6);
orbitpath.rotation.x = 2;
// Create the orbit path and add it and the moon to the orbit group.
const orbit = new THREE.Group();
orbit.add(orbitpath);
orbit.add(moon);
// Add the earth and moon orbit group to the scene.
scene.add(earth);
scene.add(orbit);
// ANIMATION:
function animate() {
requestAnimationFrame(animate);
sparklestars.rotation.y += 0.00005;
sparklestars.rotation.x += 0.00001;
earth.rotation.y += 0.001; // slow counterclockwise.
moon.rotation.y += 0.0003; // counter clockwise at a rate the keeps the moon tidal locked.
orbit.rotation.y += 0.005; // the moons orbit also tries to keep its near side facing the earth.
render();
}
// RENDERING:
function render() {
//cameraControls.update();
renderer.render(scene, camera);
}
animate();
/*
References
Cunningham, S. (2003). Computer Graphics: Programming, Problem Solving, and Visual Communication. Retrieved from https://my.uopeople.edu/pluginfile.php/389065/mod_resource/content/4/ComputerGraphics-SteveCunningham.pdf
Three.js (n.d.). Three.js Docs. Retrieved from https://threejs.org/docs/#api/en/materials/PointsMaterial
ThreeJSFundamentals.org (n.d.). Three.js Lights. Retrieved from https://threejsfundamentals.org/threejs/lessons/threejs-lights.html
*/
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment