kopia lustrzana https://github.com/robhawkes/vizicities
Added basic render of floor and lights
rodzic
7a01b5b5c9
commit
6abf0167bb
|
@ -19,7 +19,8 @@ module.exports = function(grunt) {
|
||||||
// src: ['src/shared/vendor/underscore.js', 'src/shared/vendor/three.js', 'src/client/*'],
|
// src: ['src/shared/vendor/underscore.js', 'src/shared/vendor/three.js', 'src/client/*'],
|
||||||
src: [
|
src: [
|
||||||
'src/shared/vendor/underscore.js',
|
'src/shared/vendor/underscore.js',
|
||||||
'src/shared/vendor/three.js',
|
'src/shared/vendor/three/three.js',
|
||||||
|
'src/shared/vendor/three/ColorConverter.js',
|
||||||
'src/client/Vizi.js',
|
'src/client/Vizi.js',
|
||||||
'src/client/Log.js',
|
'src/client/Log.js',
|
||||||
'src/client/Mediator.js',
|
'src/client/Mediator.js',
|
||||||
|
@ -27,7 +28,8 @@ module.exports = function(grunt) {
|
||||||
'src/client/Loop.js',
|
'src/client/Loop.js',
|
||||||
'src/client/webgl/WebGL.js',
|
'src/client/webgl/WebGL.js',
|
||||||
'src/client/webgl/Scene.js',
|
'src/client/webgl/Scene.js',
|
||||||
'src/client/webgl/Camera.js'
|
'src/client/webgl/Camera.js',
|
||||||
|
'src/client/webgl/Renderer.js'
|
||||||
],
|
],
|
||||||
dest: 'build/vizi.js'
|
dest: 'build/vizi.js'
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,34 @@
|
||||||
/* globals window, _, VIZI */
|
/* globals window, _, VIZI, THREE */
|
||||||
(function() {
|
(function() {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
VIZI.City = function() {
|
VIZI.City = function() {
|
||||||
VIZI.Log("Inititialising city");
|
VIZI.Log("Inititialising city");
|
||||||
|
|
||||||
this.loop = new VIZI.Loop();
|
_.extend(this, VIZI.Mediator);
|
||||||
|
|
||||||
this.webgl = new VIZI.WebGL();
|
this.webgl = new VIZI.WebGL();
|
||||||
|
this.loop = new VIZI.Loop();
|
||||||
|
|
||||||
|
// this.floor = new VIZI.Floor();
|
||||||
|
this.createFloor();
|
||||||
|
};
|
||||||
|
|
||||||
|
VIZI.City.prototype.createFloor = function() {
|
||||||
|
var floorWireGeom = new THREE.PlaneGeometry(5000, 5000, 200, 200);
|
||||||
|
|
||||||
|
var floorWireMat = new THREE.MeshBasicMaterial({color: 0xeeeeee, wireframe: true});
|
||||||
|
var floorWire = new THREE.Mesh(floorWireGeom, floorWireMat);
|
||||||
|
floorWire.position.y = -0.3;
|
||||||
|
floorWire.rotation.x = - 90 * Math.PI / 180;
|
||||||
|
this.publish("addToScene", floorWire);
|
||||||
|
|
||||||
|
var floorGeom = new THREE.PlaneGeometry(60000, 60000, 4, 4);
|
||||||
|
|
||||||
|
var floorMat = new THREE.MeshBasicMaterial({color: 0xffffff});
|
||||||
|
var floor = new THREE.Mesh(floorGeom, floorMat);
|
||||||
|
floor.position.y = -0.4;
|
||||||
|
floor.rotation.x = - 90 * Math.PI / 180;
|
||||||
|
this.publish("addToScene", floor);
|
||||||
};
|
};
|
||||||
}());
|
}());
|
|
@ -8,7 +8,7 @@
|
||||||
_.extend(this, VIZI.Mediator);
|
_.extend(this, VIZI.Mediator);
|
||||||
|
|
||||||
this.stopLoop = false;
|
this.stopLoop = false;
|
||||||
// this.start();
|
this.start();
|
||||||
};
|
};
|
||||||
|
|
||||||
VIZI.Loop.prototype.start = function() {
|
VIZI.Loop.prototype.start = function() {
|
||||||
|
@ -23,7 +23,8 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
VIZI.Loop.prototype.tick = function() {
|
VIZI.Loop.prototype.tick = function() {
|
||||||
this.publish("tick");
|
this.publish("update");
|
||||||
|
this.publish("render");
|
||||||
|
|
||||||
if (!this.stopLoop) {
|
if (!this.stopLoop) {
|
||||||
// Should probably be a bit more obvious that this comes from Three.js
|
// Should probably be a bit more obvious that this comes from Three.js
|
||||||
|
|
|
@ -17,7 +17,11 @@
|
||||||
|
|
||||||
this.camera = this.createCamera();
|
this.camera = this.createCamera();
|
||||||
|
|
||||||
|
this.lookAtTarget();
|
||||||
|
|
||||||
this.publish("addToScene", this.camera);
|
this.publish("addToScene", this.camera);
|
||||||
|
|
||||||
|
this.subscribe("resize", this.resize);
|
||||||
};
|
};
|
||||||
|
|
||||||
VIZI.Camera.prototype.createCamera = function() {
|
VIZI.Camera.prototype.createCamera = function() {
|
||||||
|
@ -31,6 +35,10 @@
|
||||||
return camera;
|
return camera;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
VIZI.Camera.prototype.lookAtTarget = function() {
|
||||||
|
this.camera.lookAt(this.target.position);
|
||||||
|
};
|
||||||
|
|
||||||
VIZI.Camera.prototype.enableControls = function() {
|
VIZI.Camera.prototype.enableControls = function() {
|
||||||
this.subscribe("mouseDown", function(event) {
|
this.subscribe("mouseDown", function(event) {
|
||||||
VIZI.Log("Camera mouse down handler");
|
VIZI.Log("Camera mouse down handler");
|
||||||
|
@ -48,4 +56,9 @@
|
||||||
VIZI.Log("Camera mouse wheel handler");
|
VIZI.Log("Camera mouse wheel handler");
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
VIZI.Camera.prototype.resize = function() {
|
||||||
|
this.camera.aspect = window.innerWidth / window.innerHeight;
|
||||||
|
this.camera.updateProjectionMatrix();
|
||||||
|
};
|
||||||
}());
|
}());
|
|
@ -0,0 +1,50 @@
|
||||||
|
/* globals window, _, VIZI, THREE */
|
||||||
|
(function() {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
VIZI.Renderer = function(scene, camera, domContainer) {
|
||||||
|
VIZI.Log("Inititialising WebGL renderer");
|
||||||
|
|
||||||
|
_.extend(this, VIZI.Mediator);
|
||||||
|
|
||||||
|
this.scene = scene.scene;
|
||||||
|
this.camera = camera.camera;
|
||||||
|
this.domContainer = domContainer;
|
||||||
|
|
||||||
|
this.renderer = this.createRenderer();
|
||||||
|
|
||||||
|
// Listeners
|
||||||
|
this.subscribe("render", this.render);
|
||||||
|
this.subscribe("resize", this.resize);
|
||||||
|
};
|
||||||
|
|
||||||
|
VIZI.Renderer.prototype.createRenderer = function() {
|
||||||
|
var renderer = new THREE.WebGLRenderer({
|
||||||
|
antialias: false
|
||||||
|
});
|
||||||
|
|
||||||
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||||
|
renderer.setClearColor( this.scene.fog.color, 1 );
|
||||||
|
|
||||||
|
// Gamma settings make things look 'nicer' for some reason
|
||||||
|
renderer.gammaInput = true;
|
||||||
|
renderer.gammaOutput = true;
|
||||||
|
|
||||||
|
renderer.physicallyBasedShading = true;
|
||||||
|
|
||||||
|
renderer.shadowMapEnabled = true;
|
||||||
|
renderer.shadowMapSoft = true;
|
||||||
|
|
||||||
|
this.domContainer.appendChild(renderer.domElement);
|
||||||
|
|
||||||
|
return renderer;
|
||||||
|
};
|
||||||
|
|
||||||
|
VIZI.Renderer.prototype.render = function() {
|
||||||
|
this.renderer.render( this.scene, this.camera );
|
||||||
|
};
|
||||||
|
|
||||||
|
VIZI.Renderer.prototype.resize = function() {
|
||||||
|
this.renderer.setSize( window.innerWidth, window.innerHeight );
|
||||||
|
};
|
||||||
|
}());
|
|
@ -5,10 +5,15 @@
|
||||||
VIZI.WebGL = function() {
|
VIZI.WebGL = function() {
|
||||||
VIZI.Log("Inititialising WebGL");
|
VIZI.Log("Inititialising WebGL");
|
||||||
|
|
||||||
|
_.extend(this, VIZI.Mediator);
|
||||||
|
|
||||||
this.domContainer = this.createDOMContainer();
|
this.domContainer = this.createDOMContainer();
|
||||||
this.scene = new VIZI.Scene();
|
this.scene = new VIZI.Scene();
|
||||||
this.camera = new VIZI.Camera();
|
this.camera = new VIZI.Camera();
|
||||||
this.lights = undefined;
|
this.renderer = new VIZI.Renderer(this.scene, this.camera, this.domContainer);
|
||||||
|
|
||||||
|
this.lights = [];
|
||||||
|
this.addLights();
|
||||||
};
|
};
|
||||||
|
|
||||||
VIZI.WebGL.prototype.createDOMContainer = function() {
|
VIZI.WebGL.prototype.createDOMContainer = function() {
|
||||||
|
@ -21,4 +26,43 @@
|
||||||
|
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// TODO: Split lights out into classes
|
||||||
|
VIZI.WebGL.prototype.addLights = function() {
|
||||||
|
VIZI.Log("Adding lights to scene");
|
||||||
|
|
||||||
|
var ambientLight = new THREE.AmbientLight( 0x404040 );
|
||||||
|
THREE.ColorConverter.setHSV( ambientLight.color, 0.1, 0.1, 0.4 );
|
||||||
|
|
||||||
|
this.lights.push(ambientLight);
|
||||||
|
this.publish("addToScene", ambientLight);
|
||||||
|
|
||||||
|
var directionalLight = new THREE.DirectionalLight( 0xffffff );
|
||||||
|
THREE.ColorConverter.setHSV( directionalLight.color, 0.1, 0.1, 0.55 );
|
||||||
|
directionalLight.position.x = 1000;
|
||||||
|
directionalLight.position.y = 1000;
|
||||||
|
directionalLight.position.z = 750;
|
||||||
|
directionalLight.position.normalize();
|
||||||
|
|
||||||
|
this.lights.push(directionalLight);
|
||||||
|
this.publish("addToScene", directionalLight);
|
||||||
|
|
||||||
|
var directionalLight2 = new THREE.DirectionalLight( 0x808080 );
|
||||||
|
THREE.ColorConverter.setHSV( directionalLight2.color, 0.1, 0.1, 0.5 );
|
||||||
|
directionalLight2.position.x = - 1000;
|
||||||
|
directionalLight2.position.y = 1000;
|
||||||
|
directionalLight2.position.z = - 750;
|
||||||
|
directionalLight2.position.normalize();
|
||||||
|
|
||||||
|
this.lights.push(directionalLight2);
|
||||||
|
this.publish("addToScene", directionalLight2);
|
||||||
|
|
||||||
|
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.65 );
|
||||||
|
THREE.ColorConverter.setHSV( hemiLight.color, 0.6, 0.35, 0.7 );
|
||||||
|
THREE.ColorConverter.setHSV( hemiLight.groundColor, 0.095, 0.5, 0.6 );
|
||||||
|
hemiLight.position.set( 0, 600, 0 );
|
||||||
|
|
||||||
|
this.lights.push(hemiLight);
|
||||||
|
this.publish("addToScene", hemiLight);
|
||||||
|
};
|
||||||
}());
|
}());
|
|
@ -0,0 +1,58 @@
|
||||||
|
/**
|
||||||
|
* @author bhouston / http://exocortex.com/
|
||||||
|
* @author zz85 / http://github.com/zz85
|
||||||
|
*/
|
||||||
|
|
||||||
|
THREE.ColorConverter = {
|
||||||
|
|
||||||
|
setHSV: function ( color, h, s, v ) {
|
||||||
|
|
||||||
|
// https://gist.github.com/xpansive/1337890#file-index-js
|
||||||
|
return color.setHSL( h, ( s * v ) / ( ( h = ( 2 - s ) * v ) < 1 ? h : ( 2 - h ) ), h * 0.5 );
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
getHSV: function( color ) {
|
||||||
|
|
||||||
|
var hsl = color.getHSL();
|
||||||
|
|
||||||
|
// based on https://gist.github.com/xpansive/1337890#file-index-js
|
||||||
|
hsl.s *= ( hsl.l < 0.5 ) ? hsl.l : ( 1 - hsl.l );
|
||||||
|
|
||||||
|
return {
|
||||||
|
h: hsl.h,
|
||||||
|
s: 2 * hsl.s / ( hsl.l + hsl.s ),
|
||||||
|
v: hsl.l + hsl.s
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// where c, m, y, k is between 0 and 1
|
||||||
|
|
||||||
|
setCMYK: function ( color, c, m, y, k ) {
|
||||||
|
|
||||||
|
var r = ( 1 - c ) * ( 1 - k );
|
||||||
|
var g = ( 1 - m ) * ( 1 - k );
|
||||||
|
var b = ( 1 - y ) * ( 1 - k );
|
||||||
|
|
||||||
|
return color.setRGB( r, g, b );
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
getCMYK: function ( color ) {
|
||||||
|
|
||||||
|
var r = color.r;
|
||||||
|
var g = color.g;
|
||||||
|
var b = color.b;
|
||||||
|
var k = 1 - Math.max(r, g, b);
|
||||||
|
var c = ( 1 - r - k ) / ( 1 - k );
|
||||||
|
var m = ( 1 - g - k ) / ( 1 - k );
|
||||||
|
var y = ( 1 - b - k ) / ( 1 - k );
|
||||||
|
|
||||||
|
return {
|
||||||
|
c: c, m: m, y: y, k: k
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
};
|
Ładowanie…
Reference in New Issue