script.js

var main_color = 0xffffff;
var canvas_height = window.innerHeight;
var canvas_width = window.innerWidth;
//////////////////////////////////////////
    //   Scene
//////////////////////////////////////////
var scene = new THREE.Scene();

//////////////////////////////////////////
    //   Camera
//////////////////////////////////////////
var camera = new THREE.PerspectiveCamera( 75, canvas_width/canvas_height, 0.1, 1000 );

  camera.position.set(0,50,200);
  camera.lookAt(new THREE.Vector3(0,50,0));
scene.add(camera);
//////////////////////////////////////////
    //   Renderer
//////////////////////////////////////////

var renderer = new THREE.WebGLRenderer({ alpha: true }); /// { alpha: true }
    renderer.setSize( canvas_width, canvas_height );
    renderer.shadowMapEnabled = true;
    renderer.shadowMapType = THREE.PCFSoftShadowMap;
    renderer.setClearColor(main_color,1);

    document.body.appendChild( renderer.domElement );


//////////////////////////////////////////
    //   Resize
//////////////////////////////////////////
window.onresize = function(){
  canvas_height = window.innerHeight;
  canvas_width = window.innerWidth;
  camera.aspect = canvas_width / canvas_height;
  camera.updateProjectionMatrix();
  renderer.setSize( canvas_width, canvas_height );
}
//////////////////////////////////////////
    //   Controls
//////////////////////////////////////////

  controls = new THREE.OrbitControls( camera );

  controls.damping = 0.2;
  controls.maxPolarAngle = Math.PI/2;
  controls.minPolarAngle = 1;
  controls.minDistance = 100;
  controls.maxDistance = 220;


//////////////////////////////////////////
    //    Light
//////////////////////////////////////////

var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set( 0, 100, 100 );
    spotLight.intensity = 1;
    spotLight.castShadow = true;
    scene.add(spotLight);

//////////////////////////////////////////
    //    Cubes
//////////////////////////////////////////

var base_material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
var box = new THREE.BoxGeometry( 5, 5, 5 );

for ( var i = 0; i < 500; i ++ ) {
  var mesh = new THREE.Mesh( box , base_material );
      mesh.position.x = ( Math.random() - 0.5 ) * 500;
      mesh.position.y = ( Math.random() - 0.5 ) * 500;
      mesh.position.z = ( Math.random() - 0.5 ) * 500;
      mesh.updateMatrix();
      mesh.matrixAutoUpdate = false;
      scene.add( mesh );
}

//////////////////////////////////////////
    //   Render
//////////////////////////////////////////
var render = function () { 
  requestAnimationFrame( render ); 
  animation();
  renderer.render(scene, camera);
};

//////////////////////////////////////////
    //    Animation
//////////////////////////////////////////
function animation(){
  // scene.rotation.y  -= .0005;
};
//////////////////////////////////////////
    //    Start scene
//////////////////////////////////////////
render();

YPQVeb.markdown

#three.js Starter scene Base template Load three.js and OrbitControls.js first!