hsiao
/
three-demo
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

game controller

xzz 5 年之前
父節點
61a5ed223b
當前提交
8c90aa1b9b
共有 6 個檔案被更改，包括 76 行新增 和 911 行删除
分割檢視 顯示文件統計
  1. 3
    0
      dist/index.html
  2. 1
    0
      dist/main.js
  3. 7
    902
      package-lock.json
  4. 0
    4
      package.json
  5. 38
    0
      src/controller.ts
  6. 27
    5
      src/index.ts

+ 3
- 0
dist/index.html 查看文件 

@@ -0,0 +1,3 @@
1 
+<!doctype html><head><meta charset="utf-8"><title>reefun threejs demo</title><style>body{
2 
+            margin: 0;
3 
+        }</style></head><body><script src="main.js"></script></body>

+ 1
- 0
dist/main.js
文件差異過大導致無法顯示
查看文件


+ 7
- 902
package-lock.json
文件差異過大導致無法顯示
查看文件


+ 0
- 4
package.json 查看文件 

@@ -10,9 +10,6 @@
10 10 
   "author": "",
11 11 
   "license": "ISC",
12 12 
   "devDependencies": {
13 
-    "babel-core": "^6.26.3",
14 
-    "babel-loader": "^8.1.0",
15 
-    "babel-preset-env": "^1.7.0",
16 13 
     "html-webpack-plugin": "^4.2.0",
17 14 
     "ts-loader": "^7.0.1",
18 15 
     "typescript": "^3.8.3",
 
@@ -21,7 +18,6 @@
21 18 
     "webpack-dev-server": "^3.10.3"
22 19 
   },
23 20 
   "dependencies": {
24 
-    "babel-preset-es2015": "^6.24.1",
25 21 
     "three": "^0.115.0"
26 22 
   }
27 23 
 }

+ 38
- 0
src/controller.ts 查看文件 

@@ -0,0 +1,38 @@
1 
+
2 
+export class GameController {
3 
+    root: HTMLElement;
4 
+
5 
+    callbackMap: any;
6 
+
7 
+    constructor(root: HTMLElement) {
8 
+        this.root = root;
9 
+        this.callbackMap = {};
10 
+        this.bindKey();
11 
+    }
12 
+
13 
+    onKey_A(callback: Function) {
14 
+        this.callbackMap["A"] = callback;
15 
+    }
16 
+
17 
+    onKey_S(callback: Function) {
18 
+        this.callbackMap["S"] = callback;
19 
+    }
20 
+
21 
+    onKey_W(callback: Function) {
22 
+        this.callbackMap["W"] = callback;
23 
+    }
24 
+    onKey_D(callback: Function) {
25 
+        this.callbackMap["D"] = callback;
26 
+    }
27 
+
28 
+    private bindKey() {
29 
+        this.root.onkeypress = (event) => {
30 
+            let c = event.key.toUpperCase();
31 
+            if (this.callbackMap[c]) {
32 
+                this.callbackMap[c]();
33 
+            }
34 
+        };
35 
+        console.log(this.root);
36 
+
37 
+    }
38 
+}

+ 27
- 5
src/index.ts 查看文件 

@@ -2,6 +2,7 @@ import * as THREE from "three"
2 2 
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
3 3 
 import { Object3D } from "three";
4 4
5 
+import { GameController } from "./controller"
5 6
6 7
7 8 
 export class FooGame {
 
@@ -17,11 +18,13 @@ export class FooGame {
17 18
18 19 
     updateMap: Object;
19 20
21 
+    controller: GameController;
22 
+
20 23 
     constructor() {
21 24 
         this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 0.01, 10)
22 
-        this.camera.position.x = 3;
25 
+        this.camera.position.x = 0;
23 26 
         this.camera.position.y = 3;
24 
-        this.camera.position.z = 3;
27 
+        this.camera.position.z = 5;
25 28
26 29 
         this.scene = new THREE.Scene();
27 30 
 
@@ -34,10 +37,28 @@ export class FooGame {
34 37
35 38 
         this.updateMap = {};
36 39
40 
+        this.controller = new GameController(document.body);
41 
+
37 42 
         this.animate();
38 43 
         //this.loadScene();
39 44 
     }
40 45
46 
+    bindKeyAction(box: Object3D) {
47 
+        this.controller.onKey_A(() => {
48 
+            if (box) box.position.x -= 0.1;
49 
+        });
50 
+        this.controller.onKey_D(() => {
51 
+            if (box) box.position.x += 0.1;
52 
+        });
53 
+        this.controller.onKey_S(() => {
54 
+            if (box) box.position.z += 0.1;
55 
+        });
56 
+        this.controller.onKey_W(() => {
57 
+            if (box) box.position.z -= 0.1;
58 
+        });
59 
+
60 
+    }
61 
+
41 62 
     animate() {
42 63 
         requestAnimationFrame(() => {
43 64 
             this.animate();
 
@@ -96,12 +117,13 @@ let game = new FooGame();
96 117 
 game.loadScene(() => {
97 118 
     let box = game.scene.getObjectByName("Box");
98 119 
     if (box) {
120 
+        game.bindKeyAction(box);
99 121 
         game.setUpdate(box, (obj: Object3D) => {
100 122 
             //game.camera.rotateOnAxis(obj.position, 0.01)
101 
-            obj.position.x+= performance.now()*0.000001;
102 
-            obj.position.z+= performance.now()*0.000001;
123 
+            //obj.position.x += performance.now() * 0.000001;
124 
+            //obj.position.z += performance.now() * 0.000001;
103 125 
             obj.rotateY(0.01);
104 
-            game.camera.lookAt(obj.position)
126 
+            //game.camera.lookAt(obj.position)
105 127 
         });
106 128 
     }
107 129 
 })

Write Preview
Loading…
取消
儲存