Planet, ship, stars...

index.html

<canvas id="randomness" style="display:none;"></canvas>
<canvas id="bumprandomness" style="display:none;"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
// Uniforms
varying vec3	vVertexWorldPosition;
varying vec3 vNormal;
      
void main(void) {
     vNormal	= normalize(normalMatrix * normal);
    
   vVertexWorldPosition	= (modelMatrix * vec4(position, 1.0)).xyz;

   
   gl_Position = projectionMatrix *
                modelViewMatrix *
                vec4(position, 1.0);
}

		</script>

		<script id="fragmentShader" type="x-shader/x-fragment">
varying vec3 vNormal;
varying vec3	vVertexWorldPosition;
      
uniform vec3 glowColor;
uniform float coeficient;
uniform float power;
      
void main(void) {
   
      vec3 worldCameraToVertex= vVertexWorldPosition - cameraPosition;  
  
      vec3 viewCameraToVertex	= (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;

      viewCameraToVertex	= normalize(viewCameraToVertex);
      
      float intensity 		= pow(.35 + dot(vNormal, viewCameraToVertex), 5.0);
      
    gl_FragColor = vec4(glowColor, intensity);
}

		</script>

Planet,-ship,-stars....markdown

Planet, ship, stars...

Random planet and stars generation.

A Pen by Xanmia on CodePen.

License.

script.js

var vertexHeight = 10;
var Definition = 75;
var Size = 1500;
var frame = 0;
var planeSize = 10000;
var totalObjects = 15000;
var container = document.createElement('div');
document.body.appendChild( container );

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,10, 6000)
camera.position.z = 3000; 
camera.position.x = 2000; 
camera.position.y = -500; 
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10000, 0, 9000 );

var scene = new THREE.Scene();



var uniforms = 
    {
      glowColor: { type: "c", value : new THREE.Color('#00b3ff') }
    };


	var material = new THREE.ShaderMaterial( {
            uniforms: uniforms,
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
           transparent: true,
    			depthWrite:false,
				} );

material.side	= THREE.BackSide

var	attm = new THREE.Mesh( new THREE.SphereGeometry( Size, Definition, Definition ), material );

var vground_material = new THREE.MeshPhongMaterial({ color:0xfffddd });
var createdMaterial = getMaterial(false);

var  texturef = THREE.ImageUtils.loadTexture(createdMaterial.material);
var  bumpf = THREE.ImageUtils.loadTexture(createdMaterial.bump);
//   texturef.wrapT = texturef.wrapS = THREE.RepeatWrapping;
var vground_material = new THREE.MeshPhongMaterial({ map: texturef, bumpMap: bumpf, bumpScale:5, transparent:false });


var	ball = new THREE.Mesh( new THREE.SphereGeometry( Size, Definition, Definition ), vground_material );
attm.scale.multiplyScalar(1.2);

var geometry = new THREE.Geometry();

for (i = 0; i < totalObjects; i ++) 
{ 
  var vertex = new THREE.Vector3();
  vertex.x = Math.random()*planeSize-(planeSize*.25);
  vertex.y = Math.random()*planeSize-(planeSize*.5);
  vertex.z = -(Math.random()*2500)
  geometry.vertices.push( vertex );
}

var material2 = new THREE.ParticleBasicMaterial( { size: 10 });
var particles = new THREE.ParticleSystem( geometry, material2 );
	 
scene.fog = new THREE.Fog( 0x000000, 1, 10000 );

var ship;
 var spotLight2;
var loader = new THREE.ObjectLoader();

loader.load("https://13ecbc5bb4f0b774b899dd280ceec7915d690041.googledrive.com/host/0BzjYB_Ch9pbscTBZX3l3eGdfS1k/ship4.json",function ( obj ) {
  ship = obj;
  ship.scale.set(100,100,100);
  ship.position.x = 1700;
  ship.position.z = -500;
  ship.rotation.y =Math.PI;
  ship.rotation.z = .8;
  ship.rotation.x =1.0;
//var spotLight2 = new THREE.AmbientLight( 0x404040 ); // soft white light

  var spotLight2 = new THREE.HemisphereLight ( 0x404040 );
  spotLight2.position = ball.position;
    scene.add( spotLight2 );
  scene.add( ship );
  render();
});





scene.add( particles ); 


scene.add( ball );
scene.add( attm );


scene.add( spotLight );

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
var shiprot = .00075;



			function render() {
        requestAnimationFrame( render );
        ball.rotation.y +=.0002;
        if ( ship.rotation.z >= 1.2 || ship.rotation.z <= 0.6){
          shiprot *= -1
        }
        ship.rotation.z += shiprot;
        renderer.render( scene, camera );
			}






function getMaterial(mono){
var canvas = document.getElementById('randomness');
var context = canvas.getContext('2d');
  
var bumpcanvas = document.getElementById('bumprandomness');
var bumpcontext = bumpcanvas.getContext('2d'); 
var rez= 3000;
canvas.width = rez;
canvas.height = rez;
bumpcanvas.width = rez;
bumpcanvas.height = rez;
  
var h = canvas.height*2;
var w = canvas.width*2;
bumpcontext.fillStyle = "rgba(255,255,255,1)";
bumpcontext.fillRect(0,0,w,h);
context.fillStyle = "rgba("+Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255) + ", " + Math.floor(Math.random()*255)+",1)";
context.fillRect(0,0,w,h);

  
var passes = Math.round(Math.random()*1500)+100;
while(passes--)
{
   var opacity = Math.random()*1 ;
   var bumpColor = Math.round(Math.random() * 1);
   bumpcontext.fillStyle = "rgba(" + 255*bumpColor + "," + 255*bumpColor + ", " + 255*bumpColor + "," + opacity + ")";
   bumpcontext.strokeStyle = bumpcontext.fillStyle;
  
   if(mono)
    {
      var test = Math.round(Math.random() * 255);
      context.fillStyle = "rgba(" + test + "," + test + ", " + test + "," + 1 + ")";
    }
    else{
      context.fillStyle = "rgba("+Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255) + ", " + Math.floor(Math.random()*255) + "," + opacity + ")";
    }
    context.strokeStyle = context.fillStyle;
    var size = Math.random()*50;
    var x = (Math.random()*w)-w/2, y=(Math.random()*h)-h/2;
    var tox = Math.random()*w, toy=Math.random()*h;
  
    var moreRandomness = Math.round(Math.random()*2);
  
    if(moreRandomness==0){
      context.fillRect(x,y,size*2,size*2);
      bumpcontext.fillRect(x,y,size*2,size*2);
    }
    else if (moreRandomness==1){
      context.beginPath();
      context.arc(x,y,size*2,0,Math.PI*2, true);
      context.fill();
      bumpcontext.beginPath();
      bumpcontext.arc(x,y,size*2,0,Math.PI*2, true);
      bumpcontext.fill();
    }
    else{
     context.lineWidth = size;
      context.beginPath();
      context.moveTo(x,y);
      context.lineTo(tox,toy);
      context.stroke();
      bumpcontext.lineWidth = size;
      bumpcontext.beginPath();
      bumpcontext.moveTo(x,y);
      bumpcontext.lineTo(tox,toy);
      bumpcontext.stroke();
    }
}
  return {material: canvas.toDataURL(),bump: bumpcanvas.toDataURL()};
}

style.css

body{
  margin: 0px;
  overflow: hidden;
}