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

update function

hsiao 5 年之前
父節點
8dc5efaa41
當前提交
f4b04077a3
共有 6 個文件被更改，包括 4663 次插入 和 6 次删除
統一視圖 顯示文件統計
  1. 3176
    0
      ext/GLTFLoader.js
  2. 1081
    0
      ext/OrbitControls.js
  3. 8
    0
      package-lock.json
  4. 0
    1
      public/index.html
  5. 319
    0
      public/scenes/foo.gltf
  6. 79
    5
      src/index.ts

+ 3176
- 0
ext/GLTFLoader.js
文件差異過大導致無法顯示
查看文件


+ 1081
- 0
ext/OrbitControls.js
文件差異過大導致無法顯示
查看文件


+ 8
- 0
package-lock.json 查看文件

57 
       "integrity": "sha1-mtvBKVBYKqZerXa//fOf4MJ6PAI=",
 57 
       "integrity": "sha1-mtvBKVBYKqZerXa//fOf4MJ6PAI=",
58 
       "dev": true
 58 
       "dev": true
59 
     },
 59 
     },
60 
+    "@types/three": {
61 
+      "version": "0.103.2",
62 
+      "resolved": "https://registry.npm.taobao.org/@types/three/download/@types/three-0.103.2.tgz",
63 
+      "integrity": "sha1-99SRMAAcVRlBoN7XV974EFear8Q=",
64 
+      "requires": {
65 
+        "three": "*"
66 
+      }
67 
+    },
60 
     "@types/uglify-js": {
 68 
     "@types/uglify-js": {
61 
       "version": "3.9.0",
 69 
       "version": "3.9.0",
62 
       "resolved": "https://registry.npm.taobao.org/@types/uglify-js/download/@types/uglify-js-3.9.0.tgz",
 70 
       "resolved": "https://registry.npm.taobao.org/@types/uglify-js/download/@types/uglify-js-3.9.0.tgz",

+ 0
- 1
public/index.html 查看文件

11
11
12 
 </head>
 12 
 </head>
13 
 <body>
 13 
 <body>
14 
-    <h1>ok</h1>
15 
 </body>
 14 
 </body>

+ 319
- 0
public/scenes/foo.gltf
文件差異過大導致無法顯示
查看文件


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

1 
 import * as THREE from "three"
 1 
 import * as THREE from "three"
2 
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
3 
+import { Object3D } from "three";
4 
+
5 
+
2
6
3 
 export class FooGame {
 7 
 export class FooGame {
4
8
9 
     cam_fov = 70; //视角大小
 13 
     cam_fov = 70; //视角大小
10 
     cam_aspect = window.innerWidth / window.innerHeight;
 14 
     cam_aspect = window.innerWidth / window.innerHeight;
11
15
16 
+    loader: GLTFLoader;
17 
+
18 
+    updateMap: Object;
19 
+
12 
     constructor() {
 20 
     constructor() {
13 
         this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 0.01, 10)
 21 
         this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 0.01, 10)
14 
-        this.camera.position.x = 0;
15 
-        this.camera.position.y = 1;
16 
-        this.camera.position.z = 1;
22 
+        this.camera.position.x = 3;
23 
+        this.camera.position.y = 3;
24 
+        this.camera.position.z = 3;
17
25
18 
         this.scene = new THREE.Scene();
 26 
         this.scene = new THREE.Scene();
19
27
22
30
23 
         document.body.appendChild(this.renderer.domElement);
 31 
         document.body.appendChild(this.renderer.domElement);
24
32
33 
+        this.loader = new GLTFLoader();
34 
+
35 
+        this.updateMap = {};
36 
+
25 
         this.animate();
 37 
         this.animate();
38 
+        //this.loadScene();
26 
     }
 39 
     }
27
40
28 
     animate() {
 41 
     animate() {
29 
-        requestAnimationFrame(this.animate);
42 
+        requestAnimationFrame(() => {
43 
+            this.animate();
44 
+        });
45 
+        this.updateObjects(this.scene);
30 
         this.renderer.render(this.scene, this.camera);
 46 
         this.renderer.render(this.scene, this.camera);
31 
     }
 47 
     }
48 
+
49 
+    private updateObjects(obj: Object3D) {
50 
+
51 
+        if ("update" in obj && (typeof obj["update"] == "function")) {
52 
+            var f: Function = obj["update"];
53 
+            f.call(obj, obj);
54 
+        }
55 
+
56 
+        if (obj.children && obj.children.length > 0) {
57 
+            obj.children.forEach(child => {
58 
+                this.updateObjects(child);
59 
+            });
60 
+        }
61 
+    }
62 
+
63 
+    findObjectByName(name: string, parent: Object3D = this.scene) {
64 
+        let obj = parent.getObjectByName(name);
65 
+        if (obj) return obj;
66 
+
67 
+        if (parent.children && parent.children.length > 0) {
68 
+            parent.children.forEach(child => {
69 
+                obj = this.findObjectByName(name, child);
70 
+                if (obj) {
71 
+                    return obj;
72 
+                }
73 
+            });
74 
+        }
75 
+    }
76 
+
77 
+    setUpdate(obj: Object3D, fn: Function) {
78 
+        Object.defineProperty(obj, "update", {
79 
+            writable: true,
80 
+            value: fn
81 
+        });
82 
+    }
83 
+
84 
+    loadScene(callback: Function) {
85 
+        this.loader.load("./scenes/foo.gltf", gltf => {
86 
+            this.scene.add(gltf.scene);
87 
+            let box = this.scene.getObjectByName("Box");
88 
+            box && this.camera.lookAt(box.position);
89 
+            callback();
90 
+        });
91 
+    }
32 
 }
 92 
 }
33
93
34 
-new FooGame();
94 
+let game = new FooGame();
95 
+
96 
+game.loadScene(() => {
97 
+    let box = game.scene.getObjectByName("Box");
98 
+    if (box) {
99 
+        game.setUpdate(box, (obj: Object3D) => {
100 
+            //game.camera.rotateOnAxis(obj.position, 0.01)
101 
+            obj.position.x+= performance.now()*0.000001;
102 
+            obj.position.z+= performance.now()*0.000001;
103 
+            obj.rotateY(0.01);
104 
+            game.camera.lookAt(obj.position)
105 
+        });
106 
+    }
107 
+})
108 
+

Write Preview
Loading…
取消
儲存