hsiao
/
three-demo
Seguir 1
Destacar 0
Cuchillo 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

update function

hsiao hace 5 años
padre
8dc5efaa41
commit
f4b04077a3
Se han modificado 6 ficheros con 4663 adiciones y 6 borrados
Dividir vista Mostrar estadísticas de diff
  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
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1081
- 0
ext/OrbitControls.js
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 8
- 0
package-lock.json Ver fichero 

@@ -57,6 +57,14 @@
57 57 
       "integrity": "sha1-mtvBKVBYKqZerXa//fOf4MJ6PAI=",
58 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 68 
     "@types/uglify-js": {
61 69 
       "version": "3.9.0",
62 70 
       "resolved": "https://registry.npm.taobao.org/@types/uglify-js/download/@types/uglify-js-3.9.0.tgz",

+ 0
- 1
public/index.html Ver fichero 

@@ -11,5 +11,4 @@
11 11
12 12 
 </head>
13 13 
 <body>
14 
-    <h1>ok</h1>
15 14 
 </body>

+ 319
- 0
public/scenes/foo.gltf
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 79
- 5
src/index.ts Ver fichero 

@@ -1,4 +1,8 @@
1 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 7 
 export class FooGame {
4 8 
 
@@ -9,11 +13,15 @@ export class FooGame {
9 13 
     cam_fov = 70; //视角大小
10 14 
     cam_aspect = window.innerWidth / window.innerHeight;
11 15
16 
+    loader: GLTFLoader;
17 
+
18 
+    updateMap: Object;
19 
+
12 20 
     constructor() {
13 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 26 
         this.scene = new THREE.Scene();
19 27 
 
@@ -22,13 +30,79 @@ export class FooGame {
22 30
23 31 
         document.body.appendChild(this.renderer.domElement);
24 32
33 
+        this.loader = new GLTFLoader();
34 
+
35 
+        this.updateMap = {};
36 
+
25 37 
         this.animate();
38 
+        //this.loadScene();
26 39 
     }
27 40
28 41 
     animate() {
29 
-        requestAnimationFrame(this.animate);
42 
+        requestAnimationFrame(() => {
43 
+            this.animate();
44 
+        });
45 
+        this.updateObjects(this.scene);
30 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…
Cancelar
Guardar