orbit

src/index.ts

@@ -1,8 +1,9 @@
 import * as THREE from "three"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Object3D, Mesh, TextureLoader, HemisphereLight, Color, AmbientLight, PlaneBufferGeometry, MeshPhongMaterial } from "three";
+import { Object3D, Mesh, TextureLoader, HemisphereLight, Color, AmbientLight, PlaneBufferGeometry, MeshPhongMaterial, Vector3 } from "three";
 
 import { GameController } from "./controller"
+import { OrbitNavigator, KeyPoint } from "./navigator";
 
 export class ReeGame {
 
@@ -90,9 +91,18 @@ 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"];
+            v = () => {
+                f.call(obj, obj);
+                fn.call(obj, obj);
+            };
+        }
+
         Object.defineProperty(obj, "update", {
             writable: true,
-            value: fn
+            value: v
         });
     }
 
@@ -103,8 +113,6 @@ export class ReeGame {
     loadScene(callback: Function) {
 
         this.gltfLoader.load("./scenes/campus/Unity2GLTF.gltf", gltf => {
-            console.log(gltf);
-
             this.scene.add(gltf.scene);
             this.scene.background = new THREE.Color('rgb(191,196,234)');
             //添加一个地板
@@ -124,6 +132,12 @@ 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();
 });
 

src/navigator.ts

@@ -1,14 +1,26 @@
 
 import { Object3D, Vector3 } from 'three';
+import { ReeGame } from './index';
 
 export class KeyPoint {
     point: Vector3 | Object3D = new Vector3();
-    lookAt: Vector3 | Object3D = new Vector3();
+    lookAt?: Vector3 | Object3D;
+
+    constructor(p: Vector3 | Object3D, look?: Vector3 | Object3D) {
+        this.point = p;
+        this.lookAt = look;
+    }
 }
 
 export class OrbitNavigator {
     private target: Object3D;
     private points: KeyPoint[];
+    private idxP0 = 0; // 当前位置索引
+    private p0: Vector3 = new Vector3(); //上一个关键点
+    private p1: Vector3 = new Vector3(); //下一个关键点
+    private direction: Vector3 = new Vector3(); //当前前进方向
+
+    private vec: Vector3 = new Vector3();
 
     constructor(target: Object3D, points: KeyPoint[]) {
         this.target = target;
@@ -16,7 +28,35 @@ export class OrbitNavigator {
     }
 
     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);
+        console.log("start");
+        
+    }
+
+    private update(obj: Object3D) {
+        console.log(this.direction);
+
+        if (obj.position.distanceTo(this.p1) <= 0.01) {
+            this.idxP0++;
+            this.calcDirection();
+        }
+        console.log(this.direction);
+
+        obj.position.addScaledVector(this.direction, 0.1);
+    }
 
+    private calcDirection() {
+        if (this.points.length < 2)
+            return;
+        let p0 = this.points[this.idxP0].point;
+        let p1 = this.points[this.idxP0 + 1].point;
+        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;
     }
 
 }