gistfile1.txt

<script>

       // initialize the renderer
       var renderer = new THREE.WebGLRenderer();

       // This is usually used for HiDPI device to prevent blurring output canvas (docs)
       renderer.setPixelRatio(window.devicePixelRatio);

       // sets the viewport size (docs)
       renderer.setSize(window.innerWidth, window.innerHeight);

       // A canvas where the renderer draws its output (docs)
       // The renderer gives us a domElement (our viewport) and we         append it as a child to webglviewer
document.getElementById('webglviewer').appendChild(renderer.domElement);

       // Scenes allow you to set up what and where is to be rendered by three.js. This is where you place objects, lights, and cameras (docs)
       // We initialize a scene and get a reference to it which we store in the variable scene
       var scene = new THREE.Scene();

       // Initialize a camera that uses perspective projection (docs)
       // The second parameter set the ratio of camera view to the ratio of the window itself
       // The third and the fourth parameters decide the near and far plane of the camera
       // Any object with a lower distance than the third parameter will not be visible
       // Any object with a higher distance than the fourth parameter will not be visible
       var camera = new THREE.PerspectiveCamera(
           75,
           window.innerWidth / window.innerHeight,
           1,
           10000000);

       // Set the position of the in the scene
       camera.position.set(0, 0, 0);

       // Make the camera point in a particular direction
       // We don't really have a lot of things to points towards so pointing towards a point at the (10, 0, 0) coordinates does not sound like a bad idea.
       camera.lookAt(10, 0, 0);

       // push the scene and the camera into the renderer
       renderer.render(scene, camera);

   </script>