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 ファイルの表示

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

+ 38
- 0
src/controller.ts ファイルの表示

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 
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 2 
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
3 
 import { Object3D } from "three";
 3 
 import { Object3D } from "three";
4
4
5 
+import { GameController } from "./controller"
5
6
6
7
7 
 export class FooGame {
 8 
 export class FooGame {
17
18
18 
     updateMap: Object;
 19 
     updateMap: Object;
19
20
21 
+    controller: GameController;
22 
+
20 
     constructor() {
 23 
     constructor() {
21 
         this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 0.01, 10)
 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 
         this.camera.position.y = 3;
 26 
         this.camera.position.y = 3;
24 
-        this.camera.position.z = 3;
27 
+        this.camera.position.z = 5;
25
28
26 
         this.scene = new THREE.Scene();
 29 
         this.scene = new THREE.Scene();
27
30
34
37
35 
         this.updateMap = {};
 38 
         this.updateMap = {};
36
39
40 
+        this.controller = new GameController(document.body);
41 
+
37 
         this.animate();
 42 
         this.animate();
38 
         //this.loadScene();
 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 
     animate() {
 62 
     animate() {
42 
         requestAnimationFrame(() => {
 63 
         requestAnimationFrame(() => {
43 
             this.animate();
 64 
             this.animate();
96 
 game.loadScene(() => {
 117 
 game.loadScene(() => {
97 
     let box = game.scene.getObjectByName("Box");
 118 
     let box = game.scene.getObjectByName("Box");
98 
     if (box) {
 119 
     if (box) {
120 
+        game.bindKeyAction(box);
99 
         game.setUpdate(box, (obj: Object3D) => {
 121 
         game.setUpdate(box, (obj: Object3D) => {
100 
             //game.camera.rotateOnAxis(obj.position, 0.01)
 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 
             obj.rotateY(0.01);
 125 
             obj.rotateY(0.01);
104 
-            game.camera.lookAt(obj.position)
126 
+            //game.camera.lookAt(obj.position)
105 
         });
 127 
         });
106 
     }
 128 
     }
107 
 })
 129 
 })

書き込み プレビュー
読み込み中…
キャンセル
保存