final

public/scenes/model.json

@@ -0,0 +1,46 @@
+{
+	"metadata": {
+		"version": 4.5,
+		"type": "Object",
+		"generator": "Object3D.toJSON"
+	},
+	"geometries": [
+		{
+			"uuid": "7A6FECB8-F13F-4A7D-A536-F5965EA50825",
+			"type": "TorusBufferGeometry",
+			"radius": 1,
+			"tube": 0.4,
+			"radialSegments": 8,
+			"tubularSegments": 6,
+			"arc": 6.283185
+		}],
+	"materials": [
+		{
+			"uuid": "8ABC72E1-6354-44F6-AA61-F68253ED93DE",
+			"type": "MeshStandardMaterial",
+			"color": 16777215,
+			"roughness": 0.5,
+			"metalness": 0.5,
+			"emissive": 32832,
+			"depthFunc": 3,
+			"depthTest": true,
+			"depthWrite": true,
+			"stencilWrite": false,
+			"stencilWriteMask": 255,
+			"stencilFunc": 519,
+			"stencilRef": 0,
+			"stencilFuncMask": 255,
+			"stencilFail": 7680,
+			"stencilZFail": 7680,
+			"stencilZPass": 7680
+		}],
+	"object": {
+		"uuid": "7C61FBE2-0D96-493A-AD3F-BF6EA21C4305",
+		"type": "Mesh",
+		"name": "abc",
+		"layers": 1,
+		"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,-1.862864,1],
+		"geometry": "7A6FECB8-F13F-4A7D-A536-F5965EA50825",
+		"material": "8ABC72E1-6354-44F6-AA61-F68253ED93DE"
+	}
+}

src/index.ts

@@ -1,6 +1,6 @@
 import * as THREE from "three"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Object3D, Mesh, TextureLoader, HemisphereLight, Color, AmbientLight, PlaneBufferGeometry, MeshPhongMaterial, Vector3 } from "three";
+import { Object3D, Mesh, TextureLoader, HemisphereLight, Color, AmbientLight, PlaneBufferGeometry, MeshPhongMaterial, Vector3, Scene } from "three";
 
 import { GameController } from "./controller"
 import { OrbitNavigator, KeyPoint } from "./navigator";
@@ -27,6 +27,7 @@ export class ReeGame {
         this.camera.position.z = 1;
 
         this.scene = new THREE.Scene();
+        this.scene.add(this.camera);
 
         this.light = new HemisphereLight(new Color(0XFFFFFF), new Color(0x000000), 1);
         this.light.position.set(0, 15, 0);
@@ -57,9 +58,8 @@ export class ReeGame {
 
     private updateObjects(obj: Object3D) {
 
-        if ("update" in obj && (typeof obj["update"] == "function")) {
-            var f: Function = obj["update"];
-            f.call(obj, obj);
+        if (obj.userData.update && (typeof obj.userData.update == "function")) {
+            obj.userData.update.call(obj, obj);
         }
 
         if (obj.children && obj.children.length > 0) {
@@ -91,18 +91,15 @@ export class ReeGame {
 
     static setUpdate(obj: Object3D, fn: Function) {
         let v = fn;
-        if ("update" in obj && (typeof obj["update"] == "function")) {
-            var f: Function = obj["update"];
+
+        if (obj.userData.update && (typeof obj.userData.update == "function")) {
+            var f: Function = obj.userData.update;
             v = () => {
                 f.call(obj, obj);
                 fn.call(obj, obj);
             };
         }
-
-        Object.defineProperty(obj, "update", {
-            writable: true,
-            value: v
-        });
+        obj.userData.update = v;
     }
 
     /**
@@ -131,12 +128,16 @@ export class ReeGame {
 
 let game = new ReeGame();
 game.loadScene(() => {
+
     let points: KeyPoint[] = [];
-    points.push(new KeyPoint(new Vector3(0, 0, 0)));
-    points.push(new KeyPoint(new Vector3(0, 4, 0)));
-    points.push(new KeyPoint(new Vector3(0, 0, 4)));
-    points.push(new KeyPoint(new Vector3(4, 0, 0)));
-    let orbit: OrbitNavigator = new OrbitNavigator(game.camera, points);
-    orbit.start();
+    points.push(new KeyPoint(new Vector3(2, 2, 2), new Vector3(0, 2, 0)));
+    points.push(new KeyPoint(new Vector3(-20, 15, -20), new Vector3(0, 2, 0)));
+    points.push(new KeyPoint(new Vector3(-20, 15, 20), new Vector3(0, 2, 0)));
+    points.push(new KeyPoint(new Vector3(20, 15, 20), new Vector3(0, 2, 0)));
+    points.push(new KeyPoint(new Vector3(20, 20, -20),new Vector3(0, 2, 0)));
+    points.push(new KeyPoint(new Vector3(2, 2, 2)));
+    let nav: OrbitNavigator = new OrbitNavigator(game.camera, points, 200, true);
+
+    nav.start();
 });
 

src/navigator.ts

@@ -13,50 +13,83 @@ export class KeyPoint {
 }
 
 export class OrbitNavigator {
+    private speed: number;
+    private loop: boolean;
+    private translateDelta: number;
     private target: Object3D;
     private points: KeyPoint[];
-    private idxP0 = 0; // 当前位置索引
+    private idxMax: number;
+    private idxP0 = 0; // 当前下一个位置索引
     private p0: Vector3 = new Vector3(); //上一个关键点
     private p1: Vector3 = new Vector3(); //下一个关键点
+    private lookAt: Vector3 | undefined;
     private direction: Vector3 = new Vector3(); //当前前进方向
 
     private vec: Vector3 = new Vector3();
 
-    constructor(target: Object3D, points: KeyPoint[]) {
+    constructor(target: Object3D, points: KeyPoint[], speed: number, loop: boolean = true) {
         this.target = target;
         this.points = points || [];
+        this.idxMax = points.length - 2;
+
+        this.speed = speed;
+        this.translateDelta = speed * 0.001;
+        this.loop = loop;
     }
 
     start() {
         this.idxP0 = 0;
         this.calcDirection();
+
         this.target.position.set(this.p0.x, this.p0.y, this.p0.z);
-        ReeGame.setUpdate(this.target, this.update);
+        ReeGame.setUpdate(this.target, (obj: Object3D) => {
+            this.update(obj);
+        });
         console.log("start");
-        
+
     }
 
+    restart() {
+        this.idxP0 = 0;
+        this.calcDirection();
+
+        this.target.position.set(this.p0.x, this.p0.y, this.p0.z);
+    }
     private update(obj: Object3D) {
-        console.log(this.direction);
 
-        if (obj.position.distanceTo(this.p1) <= 0.01) {
+        if (obj.position.distanceTo(this.p1) <= 0.1) {
             this.idxP0++;
             this.calcDirection();
         }
-        console.log(this.direction);
 
-        obj.position.addScaledVector(this.direction, 0.1);
+        if(this.lookAt){
+            obj.lookAt(this.lookAt);
+        }
+        obj.position.addScaledVector(this.direction, this.translateDelta);
     }
 
     private calcDirection() {
-        if (this.points.length < 2)
-            return;
+        if (this.idxP0 > this.idxMax) {
+            if (this.loop) {
+                this.restart();
+            }
+            else {
+                this.direction = new Vector3(0, 0, 0);
+                return;
+            }
+        }
+
         let p0 = this.points[this.idxP0].point;
         let p1 = this.points[this.idxP0 + 1].point;
+        let lookAt = this.points[this.idxP0].lookAt;
+
+        this.lookAt = lookAt && lookAt instanceof Vector3 ? lookAt : lookAt?.position;
         this.p0 = p0 instanceof Vector3 ? p0 : p0.position;
         this.p1 = p1 instanceof Vector3 ? p1 : p1.position;
-        this.vec = this.vec.subVectors(this.p0, this.p1);
-        this.direction = this.vec;
+        this.vec = this.vec.subVectors(this.p1, this.p0);
+        this.direction = this.vec.normalize();
+
+
     }
 
 }