Three.js base

A base/starter fiddle for Three.js

by mauricederegt

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

JavaScript

// Create a Scene
      var scene = new THREE.Scene();

      // Create a Camera
      var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );

      // Create a Renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
      renderer.setClearColor( 0x777777, 0.3);

      // For creating responsive game on resizing
      window.addEventListener( 'resize', function()
      {
        renderer.setSize( window.innerWidth, window.innerHeight );
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix( );
      } );

      // Lighning
      ambientLight = new THREE.AmbientLight( 0xFFFFFF, 0.2 );
      scene.add( ambientLight );

      hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 0.2);
      scene.add( hemisphereLight );

      directionalLight = new THREE.DirectionalLight(0xffffff, 0.4);
      directionalLight.position.set( 10, 10, 10 );
      directionalLight.castShadow = true;
      scene.add( directionalLight );

      spotLight1 = new THREE.SpotLight( 0xffffff, 0.4 );
      spotLight1.position.set( 100, 10, 100 );
      spotLight1.castShadow = true;
      spotLight1.shadowDarkness = 0.2;
      scene.add( spotLight1 );

      spotLight2 = new THREE.SpotLight( 0xffffff, 0.4 );
      spotLight2.position.set( 100, 100, 100 );
      spotLight2.castShadow = true;
      spotLight2.shadowDarkness = 0.2;
      scene.add( spotLight2 );


      // Change the cube position
      document.addEventListener ( 'keydown', Keyboard, false );

      // Create Shape
      var geometry = new THREE.BoxGeometry( 1, 1, 1 );
   
        
      // Create a material, colour or image texture ORG
      var material = new THREE.MeshLambertMaterial({
        color: 0x384E77,
        wireframe: false
      });
      
      var cube = new THREE.Mesh( geometry, material );
  ...