kopia lustrzana https://github.com/robhawkes/vizicities
Initial architecture commit
Rob Hawkes
commit
7a01b5b5c9
|
|
@ -0,0 +1,4 @@
|
|||
node_modules
|
||||
build
|
||||
|
||||
.DS_Store
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
module.exports = function(grunt) {
|
||||
var port = grunt.option('port') || 8000;
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '/*! ViziCities <%= grunt.template.today("yyyy-mm-dd") %> */\n'
|
||||
},
|
||||
build: {
|
||||
src: 'build/vizi.js',
|
||||
dest: 'build/vizi.min.js'
|
||||
}
|
||||
},
|
||||
concat: {
|
||||
options: {},
|
||||
dist: {
|
||||
// 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/Vizi.js',
|
||||
'src/client/Log.js',
|
||||
'src/client/Mediator.js',
|
||||
'src/client/City.js',
|
||||
'src/client/Loop.js',
|
||||
'src/client/webgl/WebGL.js',
|
||||
'src/client/webgl/Scene.js',
|
||||
'src/client/webgl/Camera.js'
|
||||
],
|
||||
dest: 'build/vizi.js'
|
||||
}
|
||||
},
|
||||
jshint: {
|
||||
options: {
|
||||
curly: false,
|
||||
eqeqeq: true,
|
||||
immed: true,
|
||||
latedef: true,
|
||||
newcap: true,
|
||||
noarg: true,
|
||||
sub: true,
|
||||
undef: true,
|
||||
eqnull: true,
|
||||
browser: true,
|
||||
expr: true,
|
||||
globals: {
|
||||
head: false,
|
||||
module: false,
|
||||
console: false
|
||||
},
|
||||
ignores: ['src/shared/vendor/**']
|
||||
},
|
||||
files: [ 'Gruntfile.js', 'src/**' ]
|
||||
},
|
||||
watch: {
|
||||
main: {
|
||||
files: [ 'Gruntfile.js', 'src/**', 'examples/**' ],
|
||||
tasks: 'default',
|
||||
options: {
|
||||
livereload: true
|
||||
}
|
||||
}
|
||||
},
|
||||
connect: {
|
||||
server: {
|
||||
options: {
|
||||
port: port,
|
||||
base: '.'
|
||||
}
|
||||
}
|
||||
},
|
||||
notify: {
|
||||
connect: {
|
||||
options: {
|
||||
// title: 'Watching files', // optional
|
||||
message: 'Watching for changes' //required
|
||||
}
|
||||
},
|
||||
finish: {
|
||||
options: {
|
||||
// title: 'Watching files', // optional
|
||||
message: 'Build complete' //required
|
||||
}
|
||||
}
|
||||
},
|
||||
notify_hooks: {
|
||||
options: {
|
||||
enabled: true,
|
||||
max_jshint_notifications: 5,
|
||||
title: "ViziCities"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Load the plugins
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
||||
grunt.loadNpmTasks('grunt-notify');
|
||||
|
||||
// Default task(s).
|
||||
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'notify:finish']);
|
||||
|
||||
// Serve examples locally
|
||||
grunt.registerTask('serve', ['connect', 'notify:connect', 'watch']);
|
||||
|
||||
grunt.task.run('notify_hooks');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html5>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>ViziCities Architecture Example</title>
|
||||
|
||||
<link href="reset.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="../build/vizi.js"></script>
|
||||
|
||||
<script>
|
||||
var city = new VIZI.City();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
/*
|
||||
html5doctor.com Reset Stylesheet
|
||||
v1.6.1
|
||||
Last Updated: 2010-09-17
|
||||
Author: Richard Clark - http://richclarkdesign.com
|
||||
Twitter: @rich_clark
|
||||
*/
|
||||
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
abbr, address, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, samp,
|
||||
small, strong, sub, sup, var,
|
||||
b, i,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
outline:0;
|
||||
font-size:100%;
|
||||
vertical-align:baseline;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
article,aside,details,figcaption,figure,
|
||||
footer,header,hgroup,menu,nav,section {
|
||||
display:block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes:none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content:'';
|
||||
content:none;
|
||||
}
|
||||
|
||||
a {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-size:100%;
|
||||
vertical-align:baseline;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
/* change colours to suit your needs */
|
||||
ins {
|
||||
background-color:#ff9;
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
/* change colours to suit your needs */
|
||||
mark {
|
||||
background-color:#ff9;
|
||||
color:#000;
|
||||
font-style:italic;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
abbr[title], dfn[title] {
|
||||
border-bottom:1px dotted;
|
||||
cursor:help;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
/* change border colour to suit your needs */
|
||||
hr {
|
||||
display:block;
|
||||
height:1px;
|
||||
border:0;
|
||||
border-top:1px solid #cccccc;
|
||||
margin:1em 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
input, select {
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "ViziCities",
|
||||
"version": "0.0.0",
|
||||
"description": "3D city visualisation",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "Robin Hawkes",
|
||||
"license": "All Rights Reserved",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-jshint": "~0.7.0",
|
||||
"grunt-contrib-uglify": "~0.2.2",
|
||||
"grunt-contrib-concat": "~0.3.0",
|
||||
"grunt-contrib-watch": "~0.5.3",
|
||||
"grunt-contrib-connect": "~0.5.0",
|
||||
"grunt-notify": "https://github.com/robhawkes/grunt-notify/archive/master.tar.gz"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/* globals window, _, VIZI */
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
VIZI.City = function() {
|
||||
VIZI.Log("Inititialising city");
|
||||
|
||||
this.loop = new VIZI.Loop();
|
||||
this.webgl = new VIZI.WebGL();
|
||||
};
|
||||
}());
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/* globals window, _, VIZI */
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
// http://addyosmani.com/resources/essentialjsdesignpatterns/book/#mediatorpatternjavascript
|
||||
VIZI.Log = function(msg) {
|
||||
console.log(msg);
|
||||
};
|
||||
}());
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/* globals window, _, VIZI */
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
VIZI.Loop = function() {
|
||||
VIZI.Log("Inititialising application loop");
|
||||
|
||||
_.extend(this, VIZI.Mediator);
|
||||
|
||||
this.stopLoop = false;
|
||||
// this.start();
|
||||
};
|
||||
|
||||
VIZI.Loop.prototype.start = function() {
|
||||
VIZI.Log("Starting application loop");
|
||||
this.stopLoop = false;
|
||||
this.tick();
|
||||
};
|
||||
|
||||
VIZI.Loop.prototype.stop = function() {
|
||||
VIZI.Log("Stopping application loop");
|
||||
this.stopLoop = true;
|
||||
};
|
||||
|
||||
VIZI.Loop.prototype.tick = function() {
|
||||
this.publish("tick");
|
||||
|
||||
if (!this.stopLoop) {
|
||||
// Should probably be a bit more obvious that this comes from Three.js
|
||||
// http://stackoverflow.com/questions/6065169/requestanimationframe-with-this-keyword
|
||||
window.requestAnimationFrame( this.tick.bind(this) );
|
||||
}
|
||||
};
|
||||
}());
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/* globals window, _, VIZI */
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
// http://addyosmani.com/resources/essentialjsdesignpatterns/book/#mediatorpatternjavascript
|
||||
// Apply to other objects using _.extend(newObj, VIZI.Mediator);
|
||||
VIZI.Mediator = (function() {
|
||||
// Storage for topics that can be broadcast or listened to
|
||||
var topics = {};
|
||||
|
||||
// Subscribe to a topic, supply a callback to be executed
|
||||
// when that topic is broadcast to
|
||||
var subscribe = function( topic, fn ){
|
||||
|
||||
if ( !topics[topic] ){
|
||||
topics[topic] = [];
|
||||
}
|
||||
|
||||
topics[topic].push( { context: this, callback: fn } );
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
// Publish/broadcast an event to the rest of the application
|
||||
var publish = function( topic ){
|
||||
|
||||
var args;
|
||||
|
||||
if ( !topics[topic] ){
|
||||
return false;
|
||||
}
|
||||
|
||||
args = Array.prototype.slice.call( arguments, 1 );
|
||||
for ( var i = 0, l = topics[topic].length; i < l; i++ ) {
|
||||
|
||||
var subscription = topics[topic][i];
|
||||
subscription.callback.apply( subscription.context, args );
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
return {
|
||||
publish: publish,
|
||||
subscribe: subscribe
|
||||
};
|
||||
}());
|
||||
}());
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/* globals window, _ */
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
var VIZI = {
|
||||
VERSION: 1.0
|
||||
};
|
||||
|
||||
// List any constants here, like:
|
||||
// https://github.com/mrdoob/three.js/blob/master/src/Three.js
|
||||
|
||||
// Expose VIZI to the window
|
||||
window.VIZI = VIZI;
|
||||
}());
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/* globals window, _, VIZI, THREE */
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
VIZI.Camera = function() {
|
||||
VIZI.Log("Inititialising WebGL camera");
|
||||
|
||||
_.extend(this, VIZI.Mediator);
|
||||
|
||||
this.cameraRadius = 6000;
|
||||
this.theta = 45;
|
||||
this.onMouseDownTheta = 45;
|
||||
this.phi = 60;
|
||||
this.onMouseDownPhi = 60;
|
||||
|
||||
this.target = new THREE.Object3D();
|
||||
|
||||
this.camera = this.createCamera();
|
||||
|
||||
this.publish("addToScene", this.camera);
|
||||
};
|
||||
|
||||
VIZI.Camera.prototype.createCamera = function() {
|
||||
VIZI.Log("Creating WebGL camera");
|
||||
|
||||
var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 2, 40000 );
|
||||
camera.position.x = this.cameraRadius * Math.sin( this.theta * Math.PI / 360 ) * Math.cos( this.phi * Math.PI / 360 );
|
||||
camera.position.y = this.cameraRadius * Math.sin( this.phi * Math.PI / 360 );
|
||||
camera.position.z = this.cameraRadius * Math.cos( this.theta * Math.PI / 360 ) * Math.cos( this.phi * Math.PI / 360 );
|
||||
|
||||
return camera;
|
||||
};
|
||||
|
||||
VIZI.Camera.prototype.enableControls = function() {
|
||||
this.subscribe("mouseDown", function(event) {
|
||||
VIZI.Log("Camera mouse down handler");
|
||||
});
|
||||
|
||||
this.subscribe("mouseUp", function(event) {
|
||||
VIZI.Log("Camera mouse up handler");
|
||||
});
|
||||
|
||||
this.subscribe("mouseMove", function(event) {
|
||||
VIZI.Log("Camera mouse move handler");
|
||||
});
|
||||
|
||||
this.subscribe("mouseWheel", function(event) {
|
||||
VIZI.Log("Camera mouse wheel handler");
|
||||
});
|
||||
};
|
||||
}());
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/* globals window, _, VIZI, THREE */
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
VIZI.Scene = function() {
|
||||
VIZI.Log("Inititialising WebGL scene");
|
||||
|
||||
_.extend(this, VIZI.Mediator);
|
||||
|
||||
this.scene = this.createScene();
|
||||
|
||||
// Listeners
|
||||
this.subscribe("addToScene", function(object) {
|
||||
VIZI.Log("Scene add object handler");
|
||||
VIZI.Log(object);
|
||||
this.addToScene(object);
|
||||
});
|
||||
};
|
||||
|
||||
VIZI.Scene.prototype.createScene = function() {
|
||||
VIZI.Log("Creating WebGL scene");
|
||||
|
||||
var scene = new THREE.Scene();
|
||||
scene.fog = new THREE.Fog(0xffffff, 1, 40000);
|
||||
|
||||
return scene;
|
||||
};
|
||||
|
||||
VIZI.Scene.prototype.addToScene = function(object) {
|
||||
this.scene.add(object);
|
||||
};
|
||||
}());
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/* globals window, _, VIZI, THREE */
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
VIZI.WebGL = function() {
|
||||
VIZI.Log("Inititialising WebGL");
|
||||
|
||||
this.domContainer = this.createDOMContainer();
|
||||
this.scene = new VIZI.Scene();
|
||||
this.camera = new VIZI.Camera();
|
||||
this.lights = undefined;
|
||||
};
|
||||
|
||||
VIZI.WebGL.prototype.createDOMContainer = function() {
|
||||
VIZI.Log("Creating WebGL DOM container");
|
||||
|
||||
var container = document.createElement("div");
|
||||
container.id = "webgl-container";
|
||||
|
||||
document.body.appendChild(container);
|
||||
|
||||
return container;
|
||||
};
|
||||
}());
|
||||
Plik diff jest za duży
Load Diff
Plik diff jest za duży
Load Diff
Ładowanie…
Reference in New Issue