From c5d0b945bf4dccc0e611d961f5f60dc3ded293e6 Mon Sep 17 00:00:00 2001
From: J08nY
Date: Sat, 16 Apr 2016 15:31:08 +0200
Subject: Pointerlock working(somewhat) ~lunch~
---
Enemy.ts | 12 --
Morph.ts | 43 -------
Player.ts | 15 ---
TargetCamera.ts | 1 -
World.ts | 11 --
game.ts | 298 ++++++++++++++++++++++++++++++++++++++++++----
index.css | 50 ++++++++
index.html | 43 ++-----
main.ts | 67 -----------
shader/enemy_shader.frag | 0
shader/player_shader.frag | 0
shader/vertex_shader.vert | 10 ++
shader/world_shader.frag | 0
ts/Enemy.ts | 12 ++
ts/Morph.ts | 43 +++++++
ts/Player.ts | 15 +++
ts/TargetCamera.ts | 1 +
ts/World.ts | 11 ++
ts/main.ts | 67 +++++++++++
19 files changed, 494 insertions(+), 205 deletions(-)
delete mode 100644 Enemy.ts
delete mode 100644 Morph.ts
delete mode 100644 Player.ts
delete mode 100644 TargetCamera.ts
delete mode 100644 World.ts
create mode 100644 index.css
delete mode 100644 main.ts
create mode 100644 shader/enemy_shader.frag
create mode 100644 shader/player_shader.frag
create mode 100644 shader/vertex_shader.vert
create mode 100644 shader/world_shader.frag
create mode 100644 ts/Enemy.ts
create mode 100644 ts/Morph.ts
create mode 100644 ts/Player.ts
create mode 100644 ts/TargetCamera.ts
create mode 100644 ts/World.ts
create mode 100644 ts/main.ts
diff --git a/Enemy.ts b/Enemy.ts
deleted file mode 100644
index 5193991..0000000
--- a/Enemy.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-///
-///
-
-import {Morph} from "./Morph";
-
-export class Enemy extends Morph {
-
- constructor() {
- super(null, null, null);
- //todo
- }
-}
\ No newline at end of file
diff --git a/Morph.ts b/Morph.ts
deleted file mode 100644
index f97ea5c..0000000
--- a/Morph.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-///
-///
-
-export class Morph extends Physijs.Mesh {
- faces:number;
- //TODO, probelm s tym ze ked extendujem Mesh, tak sa nedostanem k Geometry ale iba k BufferGeometry
-
- constructor(numFaces:number, material:THREE.Material, mass:number) {
- let geometry = Morph.generateGeometry(numFaces);
- super(geometry, material, mass);
- }
-
- static generateGeometry(numFaces:number):THREE.Geometry {
- if (numFaces == 4) {
- return new THREE.TetrahedronGeometry();
- } else if (numFaces == 6) {
- return new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
- } else if (numFaces == 12) {
- return new THREE.DodecahedronGeometry(1, 0);
- } else if (numFaces == 20) {
- return new THREE.IcosahedronGeometry(1, 0);
- }
- return null;
- }
-
- private updateGeometry(numFaces:number) {
- this.faces = numFaces;
- this.geometry = Morph.generateGeometry(this.faces);
- }
-
- shrink(numFaces:number):void {
- this.updateGeometry(this.faces - numFaces);
- }
-
- grow(numFaces:number):void {
- this.updateGeometry(this.faces + numFaces);
- }
-
- wobble():void {
-
- }
-
-}
\ No newline at end of file
diff --git a/Player.ts b/Player.ts
deleted file mode 100644
index 07718d2..0000000
--- a/Player.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-///
-///
-
-import {Morph} from "./Morph";
-
-export class Player extends Morph {
-
- constructor() {
- let mat = new THREE.MeshBasicMaterial({
- color: 0x00b0a0,
- shading: THREE.SmoothShading
- });
- super(4, mat, 1);
- }
-}
\ No newline at end of file
diff --git a/TargetCamera.ts b/TargetCamera.ts
deleted file mode 100644
index 8b13789..0000000
--- a/TargetCamera.ts
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/World.ts b/World.ts
deleted file mode 100644
index b3203be..0000000
--- a/World.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-///
-///
-
-import {Player} from "./Player";
-
-export class World {
-
- constructor(player: Player, scene:THREE.Scene, camera:THREE.Camera) {
-
- }
-}
\ No newline at end of file
diff --git a/game.ts b/game.ts
index 8d5da32..27ac5c6 100644
--- a/game.ts
+++ b/game.ts
@@ -3,9 +3,153 @@
///
import Vector3 = THREE.Vector3;
+import ShaderMaterial = THREE.ShaderMaterial;
+import Material = THREE.Material;
+import Geometry = THREE.Geometry;
+
+
+class PointerLock {
+ hasLock:boolean = false;
+
+ constructor(private game:Game, private blocker:HTMLElement, private instructions:HTMLElement) {
+ }
+
+
+ gain() {
+ let havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
+ if (!havePointerLock) {
+ return;
+ }
+ document.addEventListener('pointerlockchange', (event) => this.onChange(event), false);
+ document.addEventListener('mozpointerlockchange', (event) => this.onChange(event), false);
+ document.addEventListener('webkitpointerlockchange', (event) => this.onChange(event), false);
+
+ document.addEventListener('pointerlockerror', (event) => this.onError(event), false);
+ document.addEventListener('mozpointerlockerror', (event) => this.onError(event), false);
+ document.addEventListener('webkitpointerlockerror', (event) => this.onError(event), false);
+
+ this.instructions.addEventListener("click", (event) => this.onClick(event), false)
+ }
+
+ onChange(event) {
+ let element = document.body;
+ let doc:any = document;
+
+ if (doc.pointerLockElement === element || doc.mozPointerLockElement === element || doc.webkitPointerLockElement === element) {
+ //gained
+ this.hasLock = true;
+ this.blocker.style.display = "none";
+ if(this.game.state == GameState.INITIALIZED || this.game.state == GameState.PAUSED) {
+ this.game.start();
+ }
+ console.log("gained");
+ } else {
+ //lost
+ this.hasLock = false;
+ this.blocker.style.display = '-webkit-box';
+ this.blocker.style.display = '-moz-box';
+ this.blocker.style.display = 'box';
+
+ this.instructions.style.display = "";
+ if(this.game.state == GameState.STARTED) {
+ this.game.pause();
+ }
+ console.log("lost");
+ }
+ }
+
+ onError(event) {
+ this.instructions.style.display = "";
+ }
+
+ onClick(event) {
+ let element:any = document.body;
+ element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
+ this.instructions.style.display = "none";
+
+ element.requestPointerLock();
+ }
+}
+
+class Keyboard {
+ static k = {
+ 8: "backspace", 9: "tab", 13: "enter", 16: "shift",
+ 17: "ctrl", 18: "alt", 27: "esc", 32: "space",
+ 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
+ 37: "left", 38: "up", 39: "right", 40: "down",
+ 45: "insert", 46: "delete", 186: ";", 187: "=",
+ 188: ",", 189: "-", 190: ".", 191: "/",
+ 219: "[", 220: "\\", 221: "]", 222: "'"
+ };
+ private status = {};
+
+ constructor() {
+
+ }
+
+ update() {
+ for (var key in this.status) {
+ // insure that every keypress has "down" status exactly once
+ if (!this.status[key].updatedPreviously) {
+ this.status[key].down = true;
+ this.status[key].pressed = true;
+ this.status[key].updatedPreviously = true;
+ }
+ else // updated previously
+ {
+ this.status[key].down = false;
+ }
+
+ // key has been flagged as "up" since last update
+ if (this.status[key].up) {
+ delete this.status[key];
+ continue; // move on to next key
+ }
+
+ if (!this.status[key].pressed) // key released
+ this.status[key].up = true;
+ }
+ }
+
+ onKeyDown(event) {
+ var key = Keyboard.keyName(event.keyCode);
+ if (!this.status[key])
+ this.status[key] = {down: false, pressed: false, up: false, updatedPreviously: false};
+ }
+
+ onKeyUp(event) {
+ var key = Keyboard.keyName(event.keyCode);
+ if (this.status[key])
+ this.status[key].pressed = false;
+ }
+
+ down(key) {
+ return (this.status[key] && this.status[key].down);
+ }
+
+ pressed(key) {
+ return (this.status[key] && this.status[key].pressed);
+ }
+
+ up(key) {
+ return (this.status[key] && this.status[key].up);
+ }
+
+ register() {
+ document.addEventListener("keydown", (event) => this.onKeyDown(event), false);
+ document.addEventListener("keyup", (event) => this.onKeyUp(event), false);
+ }
+
+ static keyName(keyCode) {
+ return ( Keyboard.k[keyCode] != null ) ?
+ Keyboard.k[keyCode] :
+ String.fromCharCode(keyCode);
+ }
+}
+
+
class Morph extends Physijs.Mesh {
faces:number;
- //TODO, probelm s tym ze ked extendujem Mesh, tak sa nedostanem k Geometry ale iba k BufferGeometry
constructor(numFaces:number, material:THREE.Material, mass:number) {
let geometry = Morph.generateGeometry(numFaces);
@@ -47,36 +191,80 @@ class Morph extends Physijs.Mesh {
class Enemy extends Morph {
constructor() {
- super(null, null, null);
- //todo
+ super(6, Enemy.getMaterial(), 2);
+ }
+
+ static getMaterial():Material {
+ return new THREE.MeshBasicMaterial({
+ color: 0xb02000
+ });
+ /*
+ return new THREE.ShaderMaterial({
+ uniforms:{},
+ fragmentShader: document.getElementById(Enemy.shader).textContent,
+ vertexShader: document.getElementById(World.vertex_shader).textContent,
+ });*/
+
}
}
class Player extends Morph {
constructor() {
- let mat = new THREE.MeshBasicMaterial({
- color: 0x00b0a0,
+ super(4, Player.getMaterial(), 1);
+ }
+
+ static getMaterial():Material {
+ return new THREE.MeshBasicMaterial({
+ color: 0x00a0b0
});
- super(4, mat, 1);
+ /*
+ return new THREE.ShaderMaterial({
+ uniforms:{},
+ fragmentShader: document.getElementById(Player.shader).textContent,
+ vertexShader: document.getElementById(World.vertex_shader).textContent,
+ });*/
}
}
class World {
- constructor(player: Player, scene:THREE.Scene, camera:THREE.Camera) {
+ constructor(player:Player, scene:THREE.Scene, camera:THREE.Camera) {
+ player.position.set(0, 0, 0);
scene.add(player);
+
+ let enemy = new Enemy();
+ enemy.position.set(0, 5, 0);
+ scene.add(enemy);
}
}
+enum GameState {
+ INITIALIZED,
+ STARTED,
+ PAUSED,
+ STOPPED
+}
+
class Game {
renderer:THREE.WebGLRenderer;
scene:THREE.Scene;
camera:THREE.PerspectiveCamera;
+
player:Player;
- world: World;
- private ticks:number;
- private running:boolean;
+ world:World;
+ state:GameState;
+
+ keyboard:Keyboard;
+
+ private ticks:number = 0;
+ private delta:number = 0;
+ private lastFrame:number = 0;
+ private timestep:number = 1000 / 30;
+ private maxFPS:number = 30;
+
+ private keepRunning:boolean;
+
constructor() {
this.renderer = new THREE.WebGLRenderer({
@@ -86,42 +274,101 @@ class Game {
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);
+ window.addEventListener("resize", () => this.onWindowResize(), false);
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
+
+ this.keyboard = new Keyboard();
+ this.keyboard.register();
}
init():void {
//init world
this.player = new Player();
this.world = new World(this.player, this.scene, this.camera);
- this.player.position.set(0,0,0);
- this.camera.position.set(10,10,10);
- this.camera.lookAt(this.player.position);
+
//init camera
+ this.camera.position.set(10, 10, 10);
+ this.camera.lookAt(this.player.position);
+
+ this.state = GameState.INITIALIZED;
}
+
+ onWindowResize() {
+ this.camera.aspect = window.innerWidth / window.innerHeight;
+ this.camera.updateProjectionMatrix();
+
+ this.renderer.setSize(window.innerWidth, window.innerHeight);
+ }
+
+ /**
+ * Just render the scene.
+ */
render():void {
+ //console.log("render");
this.renderer.render(this.scene, this.camera);
}
- tick():void {
+ /**
+ * Update logic based on @param delta.
+ * @param delta
+ */
+ tick(delta):void {
+ //console.log("tick " + delta);
this.ticks++;
+ this.keyboard.update();
}
- run():void {
- this.running = true;
- while (this.running) {
- this.tick();
- let shouldRender = true;
- if (shouldRender) {
- this.render();
+ run(timestamp?):void {
+ if (!timestamp) {
+ timestamp = performance.now();
+ }
+
+ if (timestamp < this.lastFrame + (1000 / this.maxFPS)) {
+ if (this.keepRunning) {
+ requestAnimationFrame(() => this.run());
}
+ return;
+ }
+ this.delta += timestamp - this.lastFrame;
+ this.lastFrame = timestamp;
+ var numUpdateSteps = 0;
+ while (this.delta >= this.timestep) {
+ this.tick(this.timestep);
+ this.delta -= this.timestep;
+ if (++numUpdateSteps >= 240) {
+ // panic here, reset delta
+ this.delta = 0;
+ break;
+ }
}
+ this.render();
+ if (this.keepRunning) {
+ requestAnimationFrame(() => this.run());
+ }
+ }
+
+ start() {
+ this.state = GameState.STARTED;
+ this.keepRunning = true;
+ this.run();
}
+ pause() {
+ this.state = GameState.PAUSED;
+ this.keepRunning = false;
+ }
+
+ stop() {
+ this.pause();
+ this.state = GameState.STOPPED;
+ //end here!!
+ //todo
+ }
}
if (!Detector.webgl) {
@@ -129,8 +376,11 @@ if (!Detector.webgl) {
}
window.onload = () => {
- var game = new Game();
+ let game = new Game();
game.init();
-
- //game.run();
+ //make sure we have pointerlock here
+ let block = document.getElementById("block");
+ let instructions = document.getElementById("instructions");
+ let plock = new PointerLock(game, block, instructions);
+ plock.gain();
};
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..73d8764
--- /dev/null
+++ b/index.css
@@ -0,0 +1,50 @@
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+body {
+ background-color: #ffffff;
+ margin: 0;
+ overflow: hidden;
+ font-family: arial;
+}
+
+#block {
+
+ position: absolute;
+
+ width: 100%;
+ height: 100%;
+
+ background-color: rgba(0,0,0,0.5);
+
+}
+
+#instructions {
+
+ width: 100%;
+ height: 100%;
+
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ box-orient: horizontal;
+
+ -webkit-box-pack: center;
+ -moz-box-pack: center;
+ box-pack: center;
+
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ box-align: center;
+
+ color: #ffffff;
+ text-align: center;
+
+ cursor: pointer;
+
+}
diff --git a/index.html b/index.html
index 7eafeb6..69e022f 100644
--- a/index.html
+++ b/index.html
@@ -3,45 +3,24 @@
Transmuto
+
+
-
-
+
+
+
+
+