point lock

public/index.html

@@ -6,6 +6,7 @@
     <style>
         body{
             margin: 0;
+            cursor: none;
         }
     </style>
     

src/controller.ts

@@ -1,38 +1,83 @@
+import { Object3D, Raycaster, Camera, Scene, Euler } from "three";
+import { FooGame } from './index';
 
 export class GameController {
     root: HTMLElement;
-
+    mouse: { dx: number, dy: number };
     callbackMap: any;
 
+    private raycaster: Raycaster;
+
     constructor(root: HTMLElement) {
         this.root = root;
         this.callbackMap = {};
+
+        this.mouse = { dx: 0, dy: 0 }
+        this.raycaster = new Raycaster();
+
+        this.onKey_ESC();
         this.bindKey();
     }
 
-    onKey_A(callback: Function) {
-        this.callbackMap["A"] = callback;
+    bindMouseLookAt(obj: Camera, scene: Scene) {
+        let cam = obj;
+        let eu: Euler = new Euler(0, 0, 0, 'YXZ');
+        let PI_2 = Math.PI / 2;
+
+        this.root.onmousemove = (event) => {
+            //event.preventDefault();
+            this.mouse.dx = event.movementX;
+            this.mouse.dy = event.movementY;
+
+            eu.setFromQuaternion(cam.quaternion);
+            eu.x -= this.mouse.dy * 0.001;
+            eu.y -= this.mouse.dx * 0.001;
+            eu.x = Math.max(- PI_2, Math.min(PI_2, eu.x));
+            cam.quaternion.setFromEuler(eu);
+        };
+    }
+
+    bindMoveKeys(box: Object3D) {
+        this.onKey_A(() => {
+            if (box) box.position.x -= 0.1;
+        });
+        this.onKey_D(() => {
+            if (box) box.position.x += 0.1;
+        });
+        this.onKey_S(() => {
+            if (box) box.position.z += 0.1;
+        });
+        this.onKey_W(() => {
+            if (box) box.position.z -= 0.1;
+        });
+    }
+
+    private onKey_A(callback: Function) {
+        this.callbackMap[65] = callback;
     }
 
-    onKey_S(callback: Function) {
-        this.callbackMap["S"] = callback;
+    private onKey_S(callback: Function) {
+        this.callbackMap[83] = callback;
     }
 
-    onKey_W(callback: Function) {
-        this.callbackMap["W"] = callback;
+    private onKey_W(callback: Function) {
+        this.callbackMap[87] = callback;
     }
-    onKey_D(callback: Function) {
-        this.callbackMap["D"] = callback;
+    private onKey_D(callback: Function) {
+        this.callbackMap[68] = callback;
+    }
+    private onKey_ESC() {
+        this.callbackMap[27] = () => {
+            document.exitPointerLock();
+        };
     }
 
     private bindKey() {
         this.root.onkeypress = (event) => {
-            let c = event.key.toUpperCase();
+            let c = event.keyCode;
             if (this.callbackMap[c]) {
                 this.callbackMap[c]();
             }
         };
-        console.log(this.root);
-
     }
 }

src/index.ts

@@ -1,9 +1,9 @@
 import * as THREE from "three"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Object3D, Mesh, ShaderMaterial } from "three";
+import { Object3D, Mesh, ShaderMaterial, IcosahedronGeometry } from "three";
 
 import { GameController } from "./controller"
-
+import { VaringBox } from "./shader_test"
 
 export class FooGame {
 
@@ -22,9 +22,9 @@ export class FooGame {
 
     constructor() {
         this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 0.01, 10)
-        this.camera.position.x = 0;
-        this.camera.position.y = 3;
-        this.camera.position.z = 5;
+        this.camera.position.x = -1;
+        this.camera.position.y = 1;
+        this.camera.position.z = 1;
 
         this.scene = new THREE.Scene();
 
@@ -38,25 +38,10 @@ export class FooGame {
         this.updateMap = {};
 
         this.controller = new GameController(document.body);
+        this.controller.bindMoveKeys(this.camera);
+        this.controller.bindMouseLookAt(this.camera, this.scene);
 
         this.animate();
-        //this.loadScene();
-    }
-
-    bindKeyAction(box: Object3D) {
-        this.controller.onKey_A(() => {
-            if (box) box.position.x -= 0.1;
-        });
-        this.controller.onKey_D(() => {
-            if (box) box.position.x += 0.1;
-        });
-        this.controller.onKey_S(() => {
-            if (box) box.position.z += 0.1;
-        });
-        this.controller.onKey_W(() => {
-            if (box) box.position.z -= 0.1;
-        });
-
     }
 
     animate() {
@@ -95,7 +80,7 @@ export class FooGame {
         }
     }
 
-    setUpdate(obj: Object3D, fn: Function) {
+    static setUpdate(obj: Object3D, fn: Function) {
         Object.defineProperty(obj, "update", {
             writable: true,
             value: fn
@@ -114,54 +99,32 @@ export class FooGame {
 
 let game = new FooGame();
 
-let vertexShader =  `
-uniform float time;
-varying vec3 vPos;
-void main() {
-	vPos=position;
-	vPos.x += sin(time * vPos.z) * 2.0;
-	vPos.y += cos(time * vPos.z) * 2.0;
-	//vPos.z += tan(time * vPos.z) * 4.0;
-	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-}
-`;
 
-let fragmentShader =  `
-varying vec3 vPos;
-void main() {
-	gl_FragColor = vec4( vPos, 1.0 );
-}
-`;
 
 game.loadScene(() => {
     let box = game.scene.getObjectByName("Box");
+    let vBox = new VaringBox();
+    game.camera.lookAt(new THREE.Vector3(0, 0, 0));
     if (box) {
-        game.bindKeyAction(box);
-        let mat:ShaderMaterial;
-        if (box instanceof Mesh) {
-            let mesh: Mesh = box;
-            
-            mat = new ShaderMaterial({
-                uniforms: {
-                    time: {
-                        value: 0
-                    }
-                },
-                vertexShader: vertexShader,
-                fragmentShader: fragmentShader
-            });
-            mesh.material = mat;
-        }
-
-        game.setUpdate(box, (obj: Object3D) => {
-            //game.camera.rotateOnAxis(obj.position, 0.01)
-            //obj.position.x += performance.now() * 0.000001;
-            //obj.position.z += performance.now() * 0.000001;
-            obj.rotateY(0.01);
 
-            //game.camera.lookAt(obj.position)
-            mat.uniforms.time.value = performance.now()/500;
+        FooGame.setUpdate(box, (obj: Mesh) => {
+            //obj.rotateY(0.01);
+            obj.material = vBox.material;
+            if (obj.material instanceof ShaderMaterial) {
+                let mat: ShaderMaterial = obj.material;
+               // mat.uniforms.time.value = performance.now() / 500;
+            }
         });
     }
+
+    let geo = new IcosahedronGeometry(1, 4);
+    let box2 = new THREE.Mesh(geo, vBox.material);
+    box2.position.x = 2;
+    box2.position.z = 1;
+    box2.position.y = 2;
+
+    game.scene.add(box2);
+
+
 })
 

src/shader_test.ts

@@ -0,0 +1,35 @@
+import * as THREE from "three"
+import { IcosahedronGeometry, MeshStandardMaterial, Mesh, ShaderMaterial } from "three";
+
+export class VaringBox {
+    material: ShaderMaterial;
+    private vertexShader = `
+        uniform float time;
+        varying vec3 vPos;
+        void main() {
+            vPos=position;
+            vPos.x += sin( time + vPos.z * 4.0 ) / 4.0;
+            vPos.y += cos( time + vPos.z * 4.0 ) / 4.0;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( vPos, 1.0 );
+        }
+        `;
+
+    private fragmentShader = `
+        varying vec3 vPos;
+        void main() {
+            gl_FragColor = vec4( vPos*2.0, 1.0 );
+        }
+        `;
+
+    constructor() {
+        this.material = new ShaderMaterial({
+            uniforms: {
+                time: {
+                    value: 0
+                }
+            },
+            vertexShader: this.vertexShader,
+            fragmentShader: this.fragmentShader
+        });
+    }
+}