changed indent in code

src/Airplane.js

@@ -14,14 +14,14 @@ class Airplane {
   createCabin() {
     // BoxGeometry params width, height, depth, widthSegments, heightSegments, depthSegments
     const geomCockpit = new THREE.BoxGeometry(60, 50, 50, 1, 1, 1);
-	  const matCockpit = new THREE.MeshPhongMaterial({
+    const matCockpit = new THREE.MeshPhongMaterial({
       color: COLORS.red, 
       shading: THREE.FlatShading
     });
-	  const cockpit = new THREE.Mesh(geomCockpit, matCockpit);
-	  cockpit.castShadow = true;
-	  cockpit.receiveShadow = true;
-	  this.mesh.add(cockpit);
+    const cockpit = new THREE.Mesh(geomCockpit, matCockpit);
+    cockpit.castShadow = true;
+    cockpit.receiveShadow = true;
+    this.mesh.add(cockpit);
   }
 
   createEngine() {

src/Cloud.js

@@ -7,12 +7,12 @@ class Cloud {
     this.mesh = new THREE.Object3D();
 
     // create a cube geometry;
-	  // this shape will be duplicated to create the cloud
+    // this shape will be duplicated to create the cloud
     const geom = new THREE.BoxGeometry(20, 20, 20);
 
     // create a material; a simple white material will do the trick
-	  const mat = new THREE.MeshPhongMaterial({
-		  color: COLORS.white,  
+    const mat = new THREE.MeshPhongMaterial({
+      color: COLORS.white,  
     });
 
     // duplicate the geometry a random number of times
@@ -34,11 +34,11 @@ class Cloud {
       subMesh.scale.set(size, size, size);
 
       // allow each cube to cast and to receive shadows
-		  subMesh.castShadow = true;
+      subMesh.castShadow = true;
       subMesh.receiveShadow = true;
 
       // add the cube to the container we first created
-		  this.mesh.add(subMesh);
+      this.mesh.add(subMesh);
     }
   }
 }

src/Scene.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 
 class Scene {
   fieldOfView = 60;
-	nearPlane = 1;
+  nearPlane = 1;
   farPlane = 10000;
 
   constructor(options = {}) {
@@ -14,8 +14,8 @@ class Scene {
     this.createCamera();
     this.createRenderer();
 
-    // Add the DOM element of the renderer to the 
-	  // container created in the HTML
+    // Add the DOM element of the renderer to the
+    // container created in the HTML
     if (options.container) {
       this.container = options.container;
     } else {
@@ -28,8 +28,8 @@ class Scene {
 
   getWindowSize() {
     // Get the width and the height of the screen,
-	  // use them to set up the aspect ratio of the camera 
-	  // and the size of the renderer.
+    // use them to set up the aspect ratio of the camera 
+    // and the size of the renderer.
     this.HEIGHT = window.innerHeight;
     this.WIDTH = window.innerWidth;
     this.aspectRatio = this.WIDTH / this.HEIGHT;
@@ -39,8 +39,8 @@ class Scene {
     // update height and width of the renderer and the camera
     this.getWindowSize();
     this.renderer.setSize(this.WIDTH, this.HEIGHT);
-	  this.camera.aspect = this.aspectRatio;
-	  this.camera.updateProjectionMatrix();
+    this.camera.aspect = this.aspectRatio;
+    this.camera.updateProjectionMatrix();
   }
 
   addFog(color, near, far) {
@@ -54,19 +54,19 @@ class Scene {
   createRenderer() {
     this.renderer = new THREE.WebGLRenderer({
       // Allow transparency to show the gradient background
-		  // we defined in the CSS
+      // we defined in the CSS
       alpha: true,
       // Activate the anti-aliasing; this is less performant,
-		  // for low-poly, it should be fine :)
+      // for low-poly, it should be fine :)
       antialias: true
     });
 
     // Define the size of the renderer; in this case,
-	  // it will fill the entire screen
-	  this.renderer.setSize(this.WIDTH, this.HEIGHT);
-	
-	  // Enable shadow rendering
-	  this.renderer.shadowMap.enabled = true;
+    // it will fill the entire screen
+    this.renderer.setSize(this.WIDTH, this.HEIGHT);
+  
+    // Enable shadow rendering
+    this.renderer.shadowMap.enabled = true;
   }
 
   createCamera() {
@@ -76,10 +76,10 @@ class Scene {
       this.nearPlane,
       this.farPlane
     );
-
+    
     this.camera.position.x = 0;
-	  this.camera.position.z = 200;
-	  this.camera.position.y = 100;
+    this.camera.position.z = 200;
+    this.camera.position.y = 100;
   }
 
   addLight(light) {

src/Sea.js

@@ -8,10 +8,10 @@ class Sea {
     // the parameters are: 
     // radius top, radius bottom, height, number of segments on the radius, number of segments vertically
     const geom = new THREE.CylinderGeometry(600, 600, 800, 40, 10);
-	
+  
     // rotate the geometry on the x axis
     geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
-	
+  
     // create the material 
     const mat = new THREE.MeshPhongMaterial({
       color: COLORS.blue,

src/Sky.js

@@ -11,11 +11,11 @@ class Sky {
     this.nClouds = 20;
 
     // To distribute the clouds consistently,
-	  // we need to place them according to a uniform angle
+    // we need to place them according to a uniform angle
     const stepAngle = Math.PI * 2 / this.nClouds;
 
     // create the clouds
-	  for(let i = 0; i < this.nClouds; i++){
+    for(let i = 0; i < this.nClouds; i++){
       const cloud = new Cloud();
 
 
@@ -25,24 +25,24 @@ class Sky {
       var h = 750 + Math.random() * 200; // this is the distance between the center of the axis and the cloud itself
 
       // Trigonometry!!! I hope you remember what you've learned in Math :)
-		  // in case you don't: 
-		  // we are simply converting polar coordinates (angle, distance) into Cartesian coordinates (x, y)
-		  cloud.mesh.position.y = Math.sin(a) * h;
+      // in case you don't: 
+      // we are simply converting polar coordinates (angle, distance) into Cartesian coordinates (x, y)
+      cloud.mesh.position.y = Math.sin(a) * h;
       cloud.mesh.position.x = Math.cos(a) * h;
 
       // rotate the cloud according to its position
       cloud.mesh.rotation.z = a + Math.PI / 2;
 
       // for a better result, we position the clouds 
-		  // at random depths inside of the scene
+      // at random depths inside of the scene
       cloud.mesh.position.z = -400 - Math.random() * 400;
 
       // we also set a random scale for each cloud
-		  const size = 1 + Math.random() * 2;
-		  cloud.mesh.scale.set(size, size, size);
+      const size = 1 + Math.random() * 2;
+      cloud.mesh.scale.set(size, size, size);
 
-		  // do not forget to add the mesh of each cloud in the scene
-		  this.mesh.add(cloud.mesh);  
+      // do not forget to add the mesh of each cloud in the scene
+      this.mesh.add(cloud.mesh);  
     }
   }
 

src/config.js

@@ -1,8 +1,8 @@
 export const COLORS = {
-	red:0xf25346,
-	white:0xd8d0d1,
-	brown:0x59332e,
-	pink:0xF5986E,
-	brownDark:0x23190f,
-	blue:0x68c3c0,
+  red:0xf25346,
+  white:0xd8d0d1,
+  brown:0x59332e,
+  pink:0xF5986E,
+  brownDark:0x23190f,
+  blue:0x68c3c0,
 };

src/lights.js

@@ -2,36 +2,36 @@ import * as THREE from 'three';
 
 const createLights = (scene) => {
   // A hemisphere light is a gradient colored light; 
-	// the first parameter is the sky color, the second parameter is the ground color, 
+  // the first parameter is the sky color, the second parameter is the ground color, 
   // the third parameter is the intensity of the light
   const hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9)
 
   // A directional light shines from a specific direction. 
-	// It acts like the sun, that means that all the rays produced are parallel. 
+  // It acts like the sun, that means that all the rays produced are parallel. 
   const shadowLight = new THREE.DirectionalLight(0xffffff, .9);
 
   // Set the direction of the light  
-	shadowLight.position.set(150, 350, 350);
-	
-	// Allow shadow casting 
-	shadowLight.castShadow = true;
+  shadowLight.position.set(150, 350, 350);
+  
+  // Allow shadow casting 
+  shadowLight.castShadow = true;
 
-	// define the visible area of the projected shadow
-	shadowLight.shadow.camera.left = -400;
-	shadowLight.shadow.camera.right = 400;
-	shadowLight.shadow.camera.top = 400;
-	shadowLight.shadow.camera.bottom = -400;
-	shadowLight.shadow.camera.near = 1;
-	shadowLight.shadow.camera.far = 1000;
+  // define the visible area of the projected shadow
+  shadowLight.shadow.camera.left = -400;
+  shadowLight.shadow.camera.right = 400;
+  shadowLight.shadow.camera.top = 400;
+  shadowLight.shadow.camera.bottom = -400;
+  shadowLight.shadow.camera.near = 1;
+  shadowLight.shadow.camera.far = 1000;
 
-	// define the resolution of the shadow; the higher the better, 
-	// but also the more expensive and less performant
-	shadowLight.shadow.mapSize.width = 2048;
-	shadowLight.shadow.mapSize.height = 2048;
-	
-	// to activate the lights, just add them to the scene
-	scene.addLight(hemisphereLight);  
-	scene.addLight(shadowLight);
+  // define the resolution of the shadow; the higher the better, 
+  // but also the more expensive and less performant
+  shadowLight.shadow.mapSize.width = 2048;
+  shadowLight.shadow.mapSize.height = 2048;
+  
+  // to activate the lights, just add them to the scene
+  scene.addLight(hemisphereLight);  
+  scene.addLight(shadowLight);
 }
 
 export default createLights;