diff --git a/app/assets/index.html b/app/assets/index.html
index 8a16b4a..ffd4adc 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -4,6 +4,7 @@
Brunch - Three.js - es6
+
diff --git a/app/js/components/Bean.js b/app/js/components/Bean.js
new file mode 100644
index 0000000..ad6a1b4
--- /dev/null
+++ b/app/js/components/Bean.js
@@ -0,0 +1,28 @@
+import props from 'js/core/props';
+
+class Bean extends THREE.Object3D {
+ constructor() {
+ super();
+
+ this.radius = 1;
+ const material = new THREE.MeshStandardMaterial({
+ color: '#FFFFFF',
+ });
+ const geometry = new THREE.SphereGeometry(this.radius, 20, 20);
+
+ this.mesh = new THREE.Mesh(geometry, material);
+ this.mesh.castShadow = true;
+
+ this.add(this.mesh);
+ this.position.z += this.radius / 2 + 0.01;
+
+ this.onUpdate = this.onUpdate.bind(this);
+ }
+
+ onUpdate() {
+ // this.rotation.x += props.rotation;
+ // this.rotation.y += props.rotation;
+ }
+}
+
+module.exports = Bean;
diff --git a/app/js/components/Eyeball.js b/app/js/components/Eyeball.js
index 581eb0f..3579144 100644
--- a/app/js/components/Eyeball.js
+++ b/app/js/components/Eyeball.js
@@ -40,8 +40,8 @@ class Eyeball extends THREE.Object3D {
}
onUpdate() {
- this.rotation.x += props.rotation;
- this.rotation.y += props.rotation;
+ // this.rotation.x += props.rotation;
+ // this.rotation.y += props.rotation;
}
}
diff --git a/app/js/components/Ground.js b/app/js/components/Ground.js
index e69de29..0897a0b 100644
--- a/app/js/components/Ground.js
+++ b/app/js/components/Ground.js
@@ -0,0 +1,20 @@
+import props from 'js/core/props';
+
+class Ground extends THREE.Object3D {
+ constructor() {
+ super();
+
+ const material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0x050505 });
+ material.color.setHSL(0.095, 1, 0.75);
+ const geometry = new THREE.PlaneBufferGeometry(10000, 10000);
+ let mesh = new THREE.Mesh(geometry, material);
+
+ mesh.rotation.x = -Math.PI/2;
+ mesh.position.y = -1;
+ mesh.receiveShadow = true;
+
+ this.add(mesh);
+ }
+}
+
+module.exports = Ground;
diff --git a/app/js/components/Light.js b/app/js/components/Light.js
index d5b6458..f3c8b5e 100644
--- a/app/js/components/Light.js
+++ b/app/js/components/Light.js
@@ -1,26 +1,39 @@
-export function createLight() {
+class Lighting extends THREE.Object3D {
+ constructor() {
+ super();
- var lightGeometry = new THREE.SphereGeometry(0.1);
+ let dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+ dirLight.color.setHSL( 0.1, 1, 0.95 );
+ dirLight.position.set( -1, 1.75, 1 );
+ dirLight.position.multiplyScalar( 2 );
- var lightMaterial = new THREE.MeshStandardMaterial({
- emissive: 0xffffee,
- emissiveIntensity: 1,
- color: 0x000000
- });
+ dirLight.castShadow = true;
+ dirLight.shadow.mapSize.width = 1024;
+ dirLight.shadow.mapSize.heigth = 1024;
+ dirLight.shadow.radius = 3;
- var light = new THREE.PointLight(0xffffff, 1, 20, 2);
- light.power = 50;
- light.castShadow = true;
- light.shadow.mapSize.width = 512;
- light.shadow.mapSize.heigth = 512;
- light.shadow.radius = 1.5;
+ let d = 10;
+ dirLight.shadow.camera.left = -d;
+ dirLight.shadow.camera.right = d;
+ dirLight.shadow.camera.top = d;
+ dirLight.shadow.camera.bottom = -d;
+ dirLight.shadow.camera.far = 3500;
- light.add(new THREE.Mesh(lightGeometry, lightMaterial));
- light.position.set(0, 5, 3);
+ this.add(dirLight);
+ this.add(new THREE.DirectionalLightHelper( dirLight, 1 ));
- return light;
+ let hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
+ hemiLight.color.setHSL( 0.6, 1, 0.6 );
+ hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
+ hemiLight.position.set( 0, 4, 0 );
+ this.add( hemiLight );
+ this.add( new THREE.HemisphereLightHelper( hemiLight, 1 ) );
+
+ this.onUpdate = this.onUpdate.bind(this);
+ }
+
+ onUpdate() {
+ }
}
-export function createHemisphereLight() {
- return new THREE.HemisphereLight(0x303F9F, 0x111111, 3);
-}
+module.exports = Lighting;
diff --git a/app/js/core/Webgl.js b/app/js/core/Webgl.js
index dee5798..cbdc1dd 100644
--- a/app/js/core/Webgl.js
+++ b/app/js/core/Webgl.js
@@ -14,27 +14,42 @@ export default class Webgl {
this._renderer.gammaInput = true;
this._renderer.gammaOutput = true;
this._renderer.shadowMap.enabled = true;
- this._renderer.shadowMap.bias = 0.0001;
+ this._renderer.shadowMap.bias = -0.0001;
this._renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.dom = this._renderer.domElement;
- this.usePostprocessing = false;
- this._composer = false;
- this._passes = {};
+ this.usePostprocessing = true;
+ this._passes = [
+ new THREE.RenderPass(this.scene, this.camera),
+ // new THREE.SMAAPass(),
+ ];
this.initPostprocessing();
this.onResize(w, h);
this.onUpdate = this.onUpdate.bind(this);
this.onResize = this.onResize.bind(this);
+
+ this._controls = new THREE.OrbitControls(this.camera, this._renderer.domElement);
+ //this._controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
+ this._controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
+ this._controls.dampingFactor = 0.25;
+ this._controls.screenSpacePanning = false;
+ this._controls.minDistance = 10;
+ this._controls.maxDistance = 200;
+ this._controls.maxPolarAngle = Math.PI / 2;
}
initPostprocessing() {
if (!this.usePostprocessing) return;
- // TODO add WAGNER
- this._composer = new WAGNER.Composer(this._renderer);
- this._composer.setSize(this.width, this.height);
- this._passes.vignettePass = new WAGNER.VignettePass();
- this._passes.fxaaPass = new WAGNER.FXAAPass();
+ this._composer = new THREE.EffectComposer(this._renderer);
+ let ssaoShader = THREE.SSAOShader;
+ ssaoShader.uniforms.onlyAO = true;
+ this._passes.forEach((effect, i) => {
+ if (i == this._passes.length - 1) {
+ effect.renderToScreen = true;
+ }
+ this._composer.addPass(effect);
+ });
}
add(mesh) {
@@ -42,14 +57,9 @@ export default class Webgl {
}
onUpdate() {
+ this._controls.update();
if (this.usePostprocessing) {
- this._composer.reset();
- this._composer.renderer.clear();
this._composer.render(this.scene, this.camera);
- // TODO loop to passes
- this._composer.pass(this._passes.fxaaPass);
- this._composer.pass(this._passes.vignettePass);
- this._composer.toScreen();
} else {
this._renderer.render(this.scene, this.camera);
}
@@ -63,5 +73,8 @@ export default class Webgl {
this.camera.updateProjectionMatrix();
this._renderer.setSize(w, h);
+ if (this.usePostprocessing) {
+ this._composer.setSize(w, h);
+ }
}
}
diff --git a/app/main.js b/app/main.js
index d1c8d71..1fa0f13 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,7 +1,9 @@
import Webgl from 'js/core/Webgl';
import loop from 'js/core/Loop';
import props from 'js/core/props';
-import Eyeball from 'js/components/Eyeball';
+import Bean from 'js/components/Bean';
+import Ground from 'js/components/Ground';
+import Light from 'js/components/Light';
import { createLight, createHemisphereLight } from 'js/components/Light';
// ##
@@ -17,16 +19,17 @@ const gui = new dat.GUI();
gui.add(props, 'rotation', 0.01, 1);
gui.close();
-// ##
-// EXAMPLE LIGHT
-webgl.add(createLight());
-webgl.add(createHemisphereLight());
+webgl.add(new Ground());
+
+const light = new Light();
+webgl.add(light);
+loop.add(light.onUpdate);
// ##
// EXAMPLE BOX
-const eyeball = new Eyeball();
-webgl.add(eyeball);
-loop.add(eyeball.onUpdate);
+const bean = new Bean();
+webgl.add(bean);
+loop.add(bean.onUpdate);
// ##
// RENDERER
diff --git a/brunch-config.coffee b/brunch-config.coffee
index e59f32f..33866b1 100644
--- a/brunch-config.coffee
+++ b/brunch-config.coffee
@@ -9,5 +9,5 @@ exports.config =
joinTo: 'app.js'
npm:
globals:
- THREE: 'three-full'
+ THREE: 'three-full',
dat: 'dat-gui'