kopia lustrzana https://github.com/robhawkes/vizicities
Added World and Engine components
rodzic
27550bcaad
commit
8094b22c69
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -5,7 +5,7 @@
|
|||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="world"></div>
|
||||
|
||||
<script src="../../dist/vizicities.min.js"></script>
|
||||
<script src="main.js"></script>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
* { margin: 0; padding: 0; }
|
||||
html, body { height: 100%; overflow: hidden;}
|
||||
|
||||
#world { height: 100%; }
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
var world = VIZI.World('world');
|
|
@ -119,7 +119,8 @@ const watchFiles = ['src/**/*', 'test/**/*', 'package.json', '**/.eslintrc', '.j
|
|||
|
||||
// Run the headless unit tests as you make changes.
|
||||
function watch() {
|
||||
gulp.watch(watchFiles, ['test']);
|
||||
gulp.watch(watchFiles, ['build']);
|
||||
// gulp.watch(watchFiles, ['test']);
|
||||
}
|
||||
|
||||
function testBrowser() {
|
||||
|
|
14
package.json
14
package.json
|
@ -68,8 +68,18 @@
|
|||
"entryFileName": "vizicities",
|
||||
"mainVarName": "VIZI",
|
||||
"mochaGlobals": [
|
||||
"stub", "spy", "expect", "sandbox", "mock",
|
||||
"useFakeTimers", "useFakeXMLHttpRequest", "useFakeServer"
|
||||
"stub",
|
||||
"spy",
|
||||
"expect",
|
||||
"sandbox",
|
||||
"mock",
|
||||
"useFakeTimers",
|
||||
"useFakeXMLHttpRequest",
|
||||
"useFakeServer"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"eventemitter3": "^1.1.1",
|
||||
"three": "^0.73.2"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
import THREE from 'three';
|
||||
|
||||
// This can only be accessed from Engine.camera if you want to reference the
|
||||
// same scene in multiple places
|
||||
|
||||
export default function(container) {
|
||||
var camera = new THREE.PerspectiveCamera(40, 1, 1, 40000);
|
||||
camera.position.z = 400;
|
||||
|
||||
var updateSize = function() {
|
||||
camera.aspect = container.clientWidth / container.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', updateSize, false);
|
||||
updateSize();
|
||||
|
||||
return camera;
|
||||
};
|
|
@ -0,0 +1,29 @@
|
|||
import EventEmitter from 'eventemitter3';
|
||||
import THREE from 'three';
|
||||
import Scene from './Scene';
|
||||
import Renderer from './Renderer';
|
||||
import Camera from './Camera';
|
||||
|
||||
class Engine extends EventEmitter {
|
||||
constructor(container) {
|
||||
console.log('Init Engine');
|
||||
|
||||
super();
|
||||
|
||||
this.scene = Scene;
|
||||
this.renderer = Renderer(container);
|
||||
this.camera = Camera(container);
|
||||
this.clock = new THREE.Clock();
|
||||
}
|
||||
|
||||
_update(delta) {
|
||||
this.emit('preRender');
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
this.emit('postRender');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialise without requiring new keyword
|
||||
export default function(container) {
|
||||
return new Engine(container);
|
||||
};
|
|
@ -0,0 +1,28 @@
|
|||
import THREE from 'three';
|
||||
import Scene from './Scene';
|
||||
|
||||
// This can only be accessed from Engine.renderer if you want to reference the
|
||||
// same scene in multiple places
|
||||
|
||||
export default function(container) {
|
||||
var renderer = new THREE.WebGLRenderer({
|
||||
antialias: true
|
||||
});
|
||||
|
||||
renderer.setClearColor(Scene.fog.color, 1);
|
||||
|
||||
// Gamma settings make things look nicer
|
||||
renderer.gammaInput = true;
|
||||
renderer.gammaOutput = true;
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
var updateSize = function() {
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', updateSize, false);
|
||||
updateSize();
|
||||
|
||||
return renderer;
|
||||
};
|
|
@ -0,0 +1,10 @@
|
|||
import THREE from 'three';
|
||||
|
||||
// This can be imported from anywhere and will still reference the same scene,
|
||||
// though there is a helper reference in Engine.scene
|
||||
|
||||
export default (function() {
|
||||
var scene = new THREE.Scene();
|
||||
scene.fog = new THREE.Fog(0xffffff, 1, 15000);
|
||||
return scene;
|
||||
})();
|
|
@ -0,0 +1,50 @@
|
|||
import EventEmitter from 'eventemitter3';
|
||||
import Engine from './Engine/Engine';
|
||||
|
||||
// Pretty much any event someone using ViziCities would need will be emitted or
|
||||
// proxied by World (eg. render events, etc)
|
||||
|
||||
class World extends EventEmitter {
|
||||
constructor(domId) {
|
||||
super();
|
||||
|
||||
this._initContainer(domId);
|
||||
this._initEngine();
|
||||
|
||||
// Kick off the update and render loop
|
||||
this._update();
|
||||
}
|
||||
|
||||
_initContainer(domId) {
|
||||
this._container = document.getElementById(domId);
|
||||
}
|
||||
|
||||
_initEngine() {
|
||||
this._engine = Engine(this._container);
|
||||
|
||||
// Engine events
|
||||
//
|
||||
// Consider proxying these through events on World for public access
|
||||
// this._engine.on('preRender', () => {});
|
||||
// this._engine.on('postRender', () => {});
|
||||
}
|
||||
|
||||
_update() {
|
||||
var delta = this._engine.clock.getDelta();
|
||||
|
||||
// Once _update is called it will run forever, for now
|
||||
window.requestAnimationFrame(this._update.bind(this));
|
||||
|
||||
this.emit('preUpdate');
|
||||
this._engine._update(delta);
|
||||
this.emit('postUpdate');
|
||||
}
|
||||
|
||||
addLayer(layer) {}
|
||||
removeLayer(layer) {}
|
||||
}
|
||||
|
||||
// Initialise without requiring new keyword
|
||||
export default function(domId) {
|
||||
return new World(domId);
|
||||
};
|
|
@ -1,5 +1,10 @@
|
|||
import World from './World';
|
||||
|
||||
const VIZI = {
|
||||
version: 0.3
|
||||
version: '0.3',
|
||||
|
||||
// Public API
|
||||
World: World
|
||||
};
|
||||
|
||||
export default VIZI;
|
||||
|
|
Ładowanie…
Reference in New Issue