Solar System after jered JCD

Three.js + Orbit + Shadows

by steveow

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

<div id="container"><br /><br /><br /><br /><br />Generating world...</div>

CSS

body {
    background-color: #000;
    margin: 0px;
    overflow: hidden;
}

JavaScript

var container;//, stats;
			var camera, controls, scene, renderer;
			var texture;
			var clock = new THREE.Clock();
			var helper;
			var raycaster = new THREE.Raycaster();
			var mouse = new THREE.Vector2();
			var intersectedPoint = new THREE.Vector3(0,0,0);

			
			F_init();
			F_animate();
			
			function F_init() 
			{
				container = document.getElementById( 'container' );
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
				scene = new THREE.Scene();
				
				controls = new THREE.OrbitControls(camera);
				controls.center.set( 0.0, 10.0, 0.0 );
				controls.userPanSpeed = 100;
				//controls.center.y = 0;
				camera.position.y =  controls.center.y + 200;
				camera.position.set(-200,0,0);
			
				xxx = F_Make_Moons();
			
			function F_Make_Moons()
			{
				//... technical ref for shadows...
				//... https://msdn.microsoft.com/en-us/library/windows/desktop/ee416324%28v=vs.85%29.aspx
				
				
				//... LIGHTS
				
				var light2 = new THREE.AmbientLight(0x444444);//... for lighting the Sun and other MeshBasicMaterial meshes.
				scene.add(light2);
				
				//... PointLight
				//  http://threejs.org/docs/#Reference/Lights/PointLight
				var light3 = new THREE.PointLight( 0xffffff, 1, 0, 0);
				light3.castShadow = true;
				light3.shadow.camera.near = 1;
				light3.shadow.camera.far = 5000;
        light3.shadow.camera.fov = 90;
				// light3.shadowCameraVisible = true;
				light3.shadow.bias = 0.001;
				scene.add( light3 );			
			
				// SPHERES

				var sphereGeom = new THREE.SphereGeometry( 4, 32, 16 );
        var SunMaterial = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
				this.Sun01 = new THREE.Mesh( sphereGeom.clone(), SunMaterial );
				Sun01.position.set(-50, 0, 22);			
				scene.add( Sun01 );
				//Sun01.castShadow = false;
				//Sun01.receiveShadow = false;
				
				light3.position.set( Sun01.position.x, Sun01.position.y , Sun01.position.z);
				
        var moonMaterial = new...