<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>

<div id="container"></div>  
body {
  color: #000;
  font-family:Monospace;
  font-size:13px;
  text-align:center;
  font-weight: bold;

  background-color: #fff;
  margin: 0px;
  overflow: hidden;
}
var container, stats;

var camera, controls, scene, renderer;

var cross;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1900 );
  camera.position.z = 500;

  controls = new THREE.OrbitControls( camera );
  controls.addEventListener( 'change', render );

  scene = new THREE.Scene();
  
  // scene.fog = new THREE.Fog( 0xffffff, 1000, 2000 );
  
  object = new THREE.Object3D();

  // world

  // var g = new THREE.CylinderGeometry( 0, 100, 200, 4, 1 );
  var g = new THREE.OctahedronGeometry(100);
  var geo3 = new THREE.SphereGeometry( 30, 60, 60 );
  var mat2 = new THREE.MeshPhongMaterial( { color:0x552ffe, shading: THREE.FlatShading } );
  

 //mesh center
  var mesh0 = new THREE.Mesh(g, mat2);
  mesh0.position.x = 0;
  mesh0.position.y = 0;
  mesh0.position.z = 0;
  mesh0.castShadow = 1;
  mesh0.receiveShadow = 1;
  // mesh0.updateMatrix();
  object.add(mesh0);
  
  var r= 0;

    for ( var i = 0; i < 500; i ++ ) {

      r1 = ( Math.random() - 0.5 ) * 2000;
      r2 = ( Math.random() - 0.5 ) * 2000;
      r3 = ( Math.random() - 0.5 ) * 2000;
      
      r = Math.random() * 5;
      
//       var g = new THREE.CylinderGeometry( Math.random() * 10, Math.random() * 10, Math.random() * 30, 4, 1 );
      
      var g = new THREE.SphereGeometry( r,32, 32 );
      var geo2 = new THREE.SphereGeometry( 2, 20, 20 );
      var material = new THREE.MeshPhongMaterial( { color: 0xaeaeae, shading: THREE.FlatShading } );

      var mesh = new THREE.Mesh( g, material );
      mesh.position.x = r1;
      mesh.position.y = r2;
      mesh.position.z = 0;
      mesh.castShadow = 1;
      mesh.receiveShadow = 1;
      // mesh.updateMatrix();
      // mesh.matrixAutoUpdate = false;
      object.add( mesh );

      // var mesh2 = new THREE.Mesh(geo2, material);
      // mesh2.position.x = r1;
      // mesh2.position.y = r2 + delta;
      // mesh2.position.z = r3;
      // mesh2.updateMatrix();
      // mesh2.matrixAutoupdate = false;
      // object.add( mesh2 );

    }
  
  scene.add(object);

  // lights

  light = new THREE.DirectionalLight( 0xcccccc );
  light.position.set( 1, 1, 1 );
  scene.add( light );

  light = new THREE.DirectionalLight( 0xeeeeee );
  light.position.set( -1, -1, -1 );
  scene.add( light );

  // light = new THREE.AmbientLight( 0xababab );
  // scene.add( light );
  
  light = new THREE.HemisphereLight(0xffffff, 0x333333, 0.9);
  scene.add(light);


  // renderer

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setClearColor( 'white', 1 );
  renderer.setSize( window.innerWidth, window.innerHeight );

  container = document.getElementById( 'container' );
  container.appendChild( renderer.domElement );

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

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

  render();

}

//mousecontrols
// controls = new THREE.TrackballControls( camera );
// controls.target.set(0, 0, 0);

function animate() {
  requestAnimationFrame( animate );
  // controls.update();
  object.rotation.x += 0.005;
  render();
}

function render() {
  renderer.render( scene, camera );
}
//

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.