Code cleanup

Removal of jquery

Author: Jos Dirksen

chapter-01/01-basic-skeleton.html

@@ -6,7 +6,7 @@
     <title>Example 01.01 - Basic skeleton</title>
     <script type="text/javascript" src="../libs/three.js"></script>
     <style>
-        body{
+        body {
             /* set margin to 0 and overflow to hidden, to
              use the complete page */
             margin: 0;
@@ -25,9 +25,8 @@
 
     // once everything is loaded, we run our Three.js stuff.
     function init() {
-          // here we'll put the Three.js stuff
-    };
-
+        // here we'll put the Three.js stuff
+    }
     window.onload = init
 
 </script>

chapter-01/02-first-scene.html

@@ -6,7 +6,7 @@
     <title>Example 01.02 - First Scene</title>
     <script type="text/javascript" src="../libs/three.js"></script>
     <style>
-        body{
+        body {
             /* set margin to 0 and overflow to hidden, to go fullscreen */
             margin: 0;
             overflow: hidden;
@@ -33,50 +33,50 @@
 
         // create a render and set the size
         var renderer = new THREE.WebGLRenderer();
-        renderer.setClearColorHex()
+        renderer.setClearColorHex();
         renderer.setClearColor(new THREE.Color(0xEEEEEE));
         renderer.setSize(window.innerWidth, window.innerHeight);
 
         // show axes in the screen
-        var axes = new THREE.AxisHelper( 20 );
+        var axes = new THREE.AxisHelper(20);
         scene.add(axes);
 
         // create the ground plane
-        var planeGeometry = new THREE.PlaneGeometry(60,20);
+        var planeGeometry = new THREE.PlaneGeometry(60, 20);
         var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
-        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
+        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
 
         // rotate and position the plane
-        plane.rotation.x=-0.5*Math.PI;
-        plane.position.x=15
-        plane.position.y=0
-        plane.position.z=0
+        plane.rotation.x = -0.5 * Math.PI;
+        plane.position.x = 15;
+        plane.position.y = 0;
+        plane.position.z = 0;
 
         // add the plane to the scene
         scene.add(plane);
 
         // create a cube
-        var cubeGeometry = new THREE.BoxGeometry(4,4,4);
+        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
         var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
         var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
 
         // position the cube
-        cube.position.x=-4;
-        cube.position.y=3;
-        cube.position.z=0;
+        cube.position.x = -4;
+        cube.position.y = 3;
+        cube.position.z = 0;
 
         // add the cube to the scene
         scene.add(cube);
 
         // create a sphere
-        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
+        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
         var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
-        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
+        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
 
         // position the sphere
-        sphere.position.x=20;
-        sphere.position.y=4;
-        sphere.position.z=2;
+        sphere.position.x = 20;
+        sphere.position.y = 4;
+        sphere.position.z = 2;
 
         // add the sphere to the scene
         scene.add(sphere);
@@ -92,8 +92,7 @@
 
         // render the scene
         renderer.render(scene, camera);
-    };
-
+    }
     window.onload = init;
 
 </script>

chapter-01/03-materials-light.html

@@ -8,7 +8,7 @@
     <script type="text/javascript" src="../libs/stats.js"></script>
     <script type="text/javascript" src="../libs/dat.gui.js"></script>
     <style>
-        body{
+        body {
             /* set margin to 0 and overflow to hidden, to go fullscreen */
             margin: 0;
             overflow: hidden;
@@ -41,43 +41,43 @@
         renderer.shadowMapEnabled = true;
 
         // create the ground plane
-        var planeGeometry = new THREE.PlaneGeometry(60,20);
-        var planeMaterial =    new THREE.MeshLambertMaterial({color: 0xffffff});
-        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
-        plane.receiveShadow  = true;
+        var planeGeometry = new THREE.PlaneGeometry(60, 20);
+        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
+        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
+        plane.receiveShadow = true;
 
         // rotate and position the plane
-        plane.rotation.x=-0.5*Math.PI;
-        plane.position.x=15
-        plane.position.y=0
-        plane.position.z=0
+        plane.rotation.x = -0.5 * Math.PI;
+        plane.position.x = 15;
+        plane.position.y = 0;
+        plane.position.z = 0;
 
         // add the plane to the scene
         scene.add(plane);
 
         // create a cube
-        var cubeGeometry = new THREE.BoxGeometry(4,4,4);
+        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
         var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
         var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
         cube.castShadow = true;
 
         // position the cube
-        cube.position.x=-4;
-        cube.position.y=3;
-        cube.position.z=0;
+        cube.position.x = -4;
+        cube.position.y = 3;
+        cube.position.z = 0;
 
         // add the cube to the scene
         scene.add(cube);
 
-        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
+        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
         var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
-        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
+        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
 
         // position the sphere
-        sphere.position.x=20;
-        sphere.position.y=4;
-        sphere.position.z=2;
-        sphere.castShadow=true;
+        sphere.position.x = 20;
+        sphere.position.y = 4;
+        sphere.position.z = 2;
+        sphere.castShadow = true;
 
         // add the sphere to the scene
         scene.add(sphere);
@@ -89,22 +89,20 @@
         camera.lookAt(scene.position);
 
         // add spotlight for the shadows
-        var spotLight = new THREE.SpotLight( 0xffffff );
-        spotLight.position.set( -40, 60, -10 );
+        var spotLight = new THREE.SpotLight(0xffffff);
+        spotLight.position.set(-40, 60, -10);
         spotLight.castShadow = true;
-        scene.add( spotLight );
+        scene.add(spotLight);
 
         // add the output of the renderer to the html element
         document.getElementById("WebGL-output").appendChild(renderer.domElement);
 
         // call the render function
         renderer.render(scene, camera);
-    };
-
+    }
     window.onload = init;
 
 
-
 </script>
 </body>
 </html>

chapter-01/04-materials-light-animation.html

@@ -5,10 +5,10 @@
 <head>
     <title>Example 01.04 - Materials, light and animation</title>
     <script type="text/javascript" src="../libs/three.js"></script>
-    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
+
     <script type="text/javascript" src="../libs/stats.js"></script>
     <style>
-        body{
+        body {
             /* set margin to 0 and overflow to hidden, to go fullscreen */
             margin: 0;
             overflow: hidden;
@@ -45,43 +45,43 @@
         renderer.shadowMapEnabled = true;
 
         // create the ground plane
-        var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
+        var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
         var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
-        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
-        plane.receiveShadow  = true;
+        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
+        plane.receiveShadow = true;
 
         // rotate and position the plane
-        plane.rotation.x=-0.5*Math.PI;
-        plane.position.x=15
-        plane.position.y=0
-        plane.position.z=0
+        plane.rotation.x = -0.5 * Math.PI;
+        plane.position.x = 15;
+        plane.position.y = 0;
+        plane.position.z = 0;
 
         // add the plane to the scene
         scene.add(plane);
 
         // create a cube
-        var cubeGeometry = new THREE.BoxGeometry(4,4,4);
+        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
         var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
         var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
         cube.castShadow = true;
 
         // position the cube
-        cube.position.x=-4;
-        cube.position.y=3;
-        cube.position.z=0;
+        cube.position.x = -4;
+        cube.position.y = 3;
+        cube.position.z = 0;
 
         // add the cube to the scene
         scene.add(cube);
 
-        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
+        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
         var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
-        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
+        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
 
         // position the sphere
-        sphere.position.x=20;
-        sphere.position.y=0;
-        sphere.position.z=2;
-        sphere.castShadow=true;
+        sphere.position.x = 20;
+        sphere.position.y = 0;
+        sphere.position.z = 2;
+        sphere.castShadow = true;
 
         // add the sphere to the scene
         scene.add(sphere);
@@ -97,16 +97,16 @@
         scene.add(ambientLight);
 
         // add spotlight for the shadows
-        var spotLight = new THREE.SpotLight( 0xffffff );
-        spotLight.position.set( -40, 60, -10 );
+        var spotLight = new THREE.SpotLight(0xffffff);
+        spotLight.position.set(-40, 60, -10);
         spotLight.castShadow = true;
-        scene.add( spotLight );
+        scene.add(spotLight);
 
         // add the output of the renderer to the html element
         document.getElementById("WebGL-output").appendChild(renderer.domElement);
 
         // call the render function
-        var step=0;
+        var step = 0;
         renderScene();
 
         function renderScene() {
@@ -117,9 +117,9 @@
             cube.rotation.z += 0.02;
 
             // bounce the sphere up and down
-            step+=0.04;
-            sphere.position.x = 20+( 10*(Math.cos(step)));
-            sphere.position.y = 2 +( 10*Math.abs(Math.sin(step)));
+            step += 0.04;
+            sphere.position.x = 20 + ( 10 * (Math.cos(step)));
+            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
 
             // render using requestAnimationFrame
             requestAnimationFrame(renderScene);
@@ -137,12 +137,11 @@
             stats.domElement.style.left = '0px';
             stats.domElement.style.top = '0px';
 
-            document.getElementById("Stats-output").appendChild( stats.domElement );
+            document.getElementById("Stats-output").appendChild(stats.domElement);
 
             return stats;
         }
-    };
-
+    }
     window.onload = init;
 
 </script>