#207 - FogModule

src/modules/app/FogModule.js

@@ -0,0 +1,22 @@
+import {
+  FogExp2,
+  Fog
+} from 'three';
+
+export class FogModule {
+  constructor(params = {}, type) {
+    this.params = Object.assign({
+      color: 0xefd1b5,
+      density: 0.020,
+      near: 10,
+      far: 1000
+    }, params);
+    if (!type || type === 'exp2') this.fog = new FogExp2(this.params.color, this.params.density);
+    else if (type === 'linear') this.fog = new Fog(this.params.color, this.params.near, this.params.far);
+  }
+
+  manager(manager) {
+    this.scene = manager.get('scene');
+    this.scene.fog = this.fog;
+  }
+}

src/modules/app/index.js

@@ -6,6 +6,7 @@ import {ResizeModule} from './ResizeModule';
 import {PostProcessorModule} from './PostProcessorModule';
 import {VirtualMouseModule} from './VirtualMouseModule';
 import {EventsPatchModule} from './EventsPatchModule';
+import {FogModule} from './FogModule';
 
 export const app = {
   ElementModule,
@@ -15,5 +16,6 @@ export const app = {
   ResizeModule,
   PostProcessorModule,
   VirtualMouseModule,
-  EventsPatchModule
+  EventsPatchModule,
+  FogModule
 };

test/modules.spec.js

@@ -1,5 +1,6 @@
 import './polyfill';
 import * as WHS from '../src/index';
+import {FogModule} from '../src/modules/app/FogModule';
 import gl from 'gl';
 
 const app = new WHS.App();
@@ -39,6 +40,57 @@ test('VirtualMouseModule', () => {
   modules.mouse = new WHS.app.VirtualMouseModule();
 });
 
+
+// TODO move Modules tests into individual specs
+const defaultFog = new FogModule();
+test('FogModule', () => {
+  modules.fog = defaultFog;
+});
+describe('Default Fog', () => {
+  test('is a FogExp2', () => {
+    expect(defaultFog.fog.isFogExp2).toBeTruthy();
+  });
+
+  test('has the default color', () => {
+    expect(defaultFog.fog.color.getHex()).toBe(0xefd1b5);
+  });
+
+  test('has the default density', () => {
+    expect(defaultFog.fog.density).toBeCloseTo(0.020);
+  });
+});
+
+describe('Linear Fog', () => {
+  const linearFog = new FogModule({}, 'linear');
+  test('is a Fog', () => {
+    expect(linearFog.fog.isFog).toBeTruthy();
+  });
+
+  test('has the default color', () => {
+    expect(linearFog.fog.color.getHex()).toBe(0xefd1b5);
+  });
+
+  test('has the default near value', () => {
+    expect(linearFog.fog.near).toBe(10);
+  });
+
+  test('has the default far value', () => {
+    expect(linearFog.fog.far).toBe(1000);
+  });
+});
+
+describe('Custom Fog', () => {
+  const fogColor = 0xffffff;
+  const fogDensity = 0.025;
+  const customExp2Fog = new FogModule({color: fogColor, density: fogDensity});
+  test('is set with the color param', () => {
+    expect(customExp2Fog.fog.color.getHex()).toBe(fogColor);
+  });
+  test('s set with the density param', () => {
+    expect(customExp2Fog.fog.density).toBeCloseTo(fogDensity);
+  });
+});
+
 test('Applying basic modules to app', () => {
   app
     .module(modules.element)
@@ -47,7 +99,8 @@ test('Applying basic modules to app', () => {
     .module(modules.rendering)
     .module(modules.postprocessor)
     .module(modules.resize)
-    .module(modules.mouse);
+    .module(modules.mouse)
+    .module(modules.fog);
 
   app.start();
 });