wip: rectarealight

examples/layout.pug

@@ -9,7 +9,7 @@ html
     block body
 
     block dependencies
-      script(src='/examples/assets/vendor/three.min.js')
+      script(src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js')
       script(src='../../../build/whitestorm.js')
       block additional
         script(src='../../../modules/whs-module-statsjs/build/StatsModule.js')

examples/lights/area/script.js

@@ -2,7 +2,6 @@ import * as UTILS from '../../globals';
 
 const ad = UTILS.appDefaults;
 
-const controlsModule = new WHS.OrbitControlsModule();
 const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
   position: {
     z: 500,
@@ -15,13 +14,11 @@ const cameraModule = new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
 const app = new WHS.App([
   ...UTILS.appModules({
     position: new THREE.Vector3(0, 10, 200)
-  }, ad.rendering, ad.physics, false),
-  controlsModule,
+  }),
   cameraModule,
   new WHS.ResizeModule()
 ]);
-
-controlsModule.controls.autoRotate = true;
+// controlsModule.controls.autoRotate = true;
 
 new WHS.Box({
   geometry: {
@@ -30,8 +27,10 @@ new WHS.Box({
     depth: 100
   },
 
-  material: new THREE.MeshPhongMaterial({
-    color: 0x4286f4
+  material: new THREE.MeshStandardMaterial({
+    color: 0x4286f4,
+    metalness: 0.0,
+    roughness: 0.044676705160855
   }),
 
   position: [0, 0, 0],
@@ -44,35 +43,21 @@ const plane = new WHS.Box({
     height: 0.1,
     depth: 2000
   },
-  material: new THREE.MeshPhongMaterial({
-    color: 0xffffff
+  material: new THREE.MeshStandardMaterial({
+    color: 0x808080,
+    metalness: 0.0,
+    roughness: 0.044676705160855
   }),
   position: [0, -60, 0],
   rotation: [0, 0, 25]
 });
 plane.addTo(app);
 
-const lightDimension = {width: 50, height: 200};
+const lightDimension = {width: 350, height: 200};
 const lightPosition = {x: 0, y: 100, z: -200};
 const lightRotation = {x: 0.3, y: 0, z: -0.1};
 
-const planeLight = new WHS.Box({
-  geometry: {
-    width: lightDimension.width,
-    height: lightDimension.height,
-    depth: 0.2
-  },
-
-  material: new THREE.MeshBasicMaterial({
-    color: 0xffffff
-  }),
-
-  position: [lightPosition.x, lightPosition.y, lightPosition.z],
-  rotation: [lightRotation.x, lightRotation.y, lightRotation.z]
-});
-planeLight.addTo(app);
-
-const intensityFactor = 2000;
+const intensityFactor = 1000;
 const areaLight = new WHS.AreaLight({
   color: 0xffffff,
   intensity: lightDimension.width * intensityFactor,
@@ -90,7 +75,25 @@ const areaLight = new WHS.AreaLight({
     y: lightRotation.y,
     z: lightRotation.z
   }
+
+  // position: [0, 10, 0],
+  // rotation: [-Math.PI/2, 0, 0]
+});
+
+const scene = app.get('scene');
+const renderer = app.get('renderer');
+
+renderer.gammaInput = true;
+renderer.gammaOutput = true;
+
+// new WHS.PointLight({
+//   intensity: 0.0
+// }).addTo(app);
+
+areaLight.addTo(app).then(({native}) => {
+  const helper = new THREE.RectAreaLightHelper(native);
+  scene.add(helper);
 });
-areaLight.addTo(app);
+
 
 app.start();

package.json

@@ -31,19 +31,19 @@
   "license": "MIT",
   "homepage": "https://github.com/WhitestormJS/whitestorm.js#readme",
   "dependencies": {
-    "@types/node": "^7.0.32",
+    "@types/node": "^8.0.4",
     "lodash-es": "^4.17.4",
-    "minivents": "^2.1.0",
-    "three": "^0.85.2"
+    "three": "^0.86.0",
+    "minivents": "^2.1.0"
   },
   "devDependencies": {
     "babel": "^6.23.0",
-    "babel-core": "^6.24.1",
+    "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
-    "babel-jest": "^19.0.0",
-    "babel-loader": "^7.0.0",
+    "babel-jest": "^20.0.3",
+    "babel-loader": "^7.1.0",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-istanbul": "^4.1.3",
+    "babel-plugin-istanbul": "^4.1.4",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
@@ -57,8 +57,8 @@
     "benchmark": "^2.1.4",
     "buffer-shims": "^1.0.0",
     "coveralls": "^2.13.1",
-    "del": "^2.2.2",
-    "express": "^4.15.2",
+    "del": "^3.0.0",
+    "express": "^4.15.3",
     "gl": "^4.0.3",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
@@ -67,34 +67,34 @@
     "gulp-browserify": "^0.5.1",
     "gulp-cli": "^1.3.0",
     "gulp-jsdoc3": "^1.0.1",
-    "gulp-less": "^3.3.0",
+    "gulp-less": "^3.3.2",
     "gulp-watch": "^4.3.11",
-    "happypack": "^3.0.3",
-    "jest": "^19.0.2",
+    "happypack": "^4.0.0-beta.1",
+    "jest": "^20.0.4",
     "jest-babel": "^1.0.1",
     "js-yaml": "^3.8.4",
     "jsdoc-babel": "^0.3.0",
     "less": "^2.7.2",
     "mdurl": "^1.0.1",
     "minami": "^1.2.3",
-    "mocha": "^3.3.0",
-    "nyc": "^10.3.0",
+    "mocha": "^3.4.2",
+    "nyc": "^11.0.3",
     "path": "^0.12.7",
-    "postprocessing": "^2.1.4",
+    "postprocessing": "^2.2.0",
     "present": "^1.0.0",
-    "pug": "^2.0.0-rc.1",
-    "redux": "^3.6.0",
+    "pug": "^2.0.0-rc.2",
+    "redux": "^3.7.1",
     "semantic-ui-less": "^2.2.10",
-    "snyk": "^1.30.0",
+    "snyk": "^1.36.2",
     "surge": "^0.19.0",
-    "tslint": "^5.4.2",
-    "typescript": "^2.3.4",
+    "tslint": "^5.4.3",
+    "typescript": "^2.4.1",
     "uglify-loader": "^2.0.0",
-    "webpack": "^2.5.0",
+    "webpack": "^3.0.0",
     "webpack-dashboard": "^0.4.0",
-    "webpack-dev-middleware": "^1.10.2",
+    "webpack-dev-middleware": "^1.11.0",
     "xo": "^0.18.2",
-    "yargs": "^8.0.1"
+    "yargs": "^8.0.2"
   },
   "eslintConfig": {
     "parserOptions": {

src/components/lights/AreaLight.js

@@ -19,7 +19,6 @@ class AreaLight extends LightComponent {
     return this.applyBridge({light: new RectAreaLightNative(
       params.color,
       params.intensity,
-      params.distance,
       params.width,
       params.height
     )}).light;