'use strict';

angular.module('myApp.view5', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view5', {
        templateUrl: 'view5/view5.html',
        controller: 'View5Ctrl'
    });
}])
.controller('View5Ctrl', ['$scope', function($scope) {
    $scope.init = function(){
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;

        var render = function () {
            requestAnimationFrame( render );

            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;

            renderer.render(scene, camera);
        };

        render();
    };

    $scope.init();
}]);
@@ -349,16 +349,51 @@
 Scene();
+ // Create a Three.js scene object.
 %0A       
@@ -434,17 +434,16 @@
 eCamera(
- 
 75, wind
@@ -455,17 +455,19 @@
 nerWidth
-/
+ / 
 window.i
@@ -491,62 +491,214 @@
 1000
- 
 );
-%0A%0A        var renderer = new THREE.WebGLRenderer();
+ // Define the perspective camera's attributes.%0A%0A        var renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer(); // Fallback to canvas renderer, if necessary.
 %0A   
@@ -719,17 +719,16 @@
 setSize(
- 
 window.i
@@ -756,19 +756,57 @@
 erHeight
- 
 );
+ // Set the size of the WebGL viewport.
 %0A       
@@ -832,17 +832,16 @@
 ndChild(
- 
 renderer
@@ -851,19 +851,59 @@
 mElement
- 
 );
+ // Append the WebGL viewport to the DOM.
 %0A%0A      
@@ -933,11 +933,12 @@
 REE.
-Box
+Cube
 Geom
@@ -946,19 +946,53 @@
 try(
- 1, 1, 1 );
+20, 20, 20); // Create a 20 by 20 by 20 cube.
 %0A   
@@ -1039,17 +1039,16 @@
 aterial(
- 
 %7B color:
@@ -1056,17 +1056,49 @@
 0x00
-ff
+FF
 00 %7D
- 
 );
+ // Skin the cube with 100%25 blue.
 %0A   
@@ -1128,17 +1128,16 @@
 EE.Mesh(
- 
 geometry
@@ -1150,152 +1150,384 @@
 rial
- 
 );
-%0A        scene.add( cube );%0A%0A        camera.position.z = 5;%0A%0A        var render = function () %7B%0A            requestAnimationFrame( render );%0A
+ // Create a mesh based on the specified geometry (cube) and material (blue skin).%0A        scene.add(cube); // Add the cube at (0, 0, 0).%0A%0A        camera.position.z = 50; // Move the camera away from the origin, down the positive z-axis.%0A%0A        var render = function () %7B%0A            cube.rotation.x += 0.01; // Rotate the sphere by a small amount about the x- and y-axes.
 %0A   
@@ -1553,18 +1553,20 @@
 ion.
-x
+y
  += 0.
+0
 1;%0A
+%0A
     
@@ -1577,106 +1577,340 @@
     
-cube.rotation.y += 0.1;%0A%0A            renderer.render(scene, camera);%0A        %7D;%0A%0A        render();
+renderer.render(scene, camera); // Each time we change the position of the cube object, we must re-render it.%0A            requestAnimationFrame(render); // Call the render() function up to 60 times per second (i.e., up to 60 animation frames per second).%0A        %7D;%0A%0A        render(); // Start the rendering of the animation frames.
 %0A   

Add comment in view5.js