push

src/controller.ts

@@ -1,7 +1,6 @@
 
 export class GameController {
     root: HTMLElement;
-
     callbackMap: any;
 
     constructor(root: HTMLElement) {
@@ -25,6 +24,11 @@ export class GameController {
         this.callbackMap["D"] = callback;
     }
 
+    onKey_Space(callback:Function){
+        this.callbackMap[" "]=callback;
+    }
+    
+
     private bindKey() {
         this.root.onkeypress = (event) => {
             let c = event.key.toUpperCase();

src/index.ts

@@ -1,9 +1,11 @@
 import * as THREE from "three"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Object3D } from "three";
+import { Object3D, Camera } from "three";
 
 import { GameController } from "./controller"
 
+//let step=0;
+
 
 export class FooGame {
 
@@ -14,12 +16,25 @@ export class FooGame {
     cam_fov = 70; //视角大小
     cam_aspect = window.innerWidth / window.innerHeight;
 
+    mouseX = 0;
+    mouseY = 0;
+    mouseXOnMouseDown = 0;
+    currentRotationX = 0;
+    currentRotationXOnMouseDown = 0;
+
+    step = 0;
+
+
+    windowHalfX = window.innerWidth / 2;
+    windowHalfY = window.innerHeight / 2;
+
     loader: GLTFLoader;
 
     updateMap: Object;
 
     controller: GameController;
 
+
     constructor() {
         this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 0.01, 10)
         this.camera.position.x = 0;
@@ -33,6 +48,9 @@ export class FooGame {
 
         document.body.appendChild(this.renderer.domElement);
 
+        document.addEventListener('mousedown', this.onDocumentMouseDown, false);
+        //document.body.addEventListener('mousemove', this.onDocumentMouseMove);
+
         this.loader = new GLTFLoader();
 
         this.updateMap = {};
@@ -43,18 +61,44 @@ export class FooGame {
         //this.loadScene();
     }
 
-    bindKeyAction(box: Object3D) {
+    onDocumentMouseDown = (event: MouseEvent) => {
+        event.preventDefault();
+        //保证监听拖拽事件
+        document.addEventListener('mousemove', this.onDocumentMouseMove, false);
+        document.addEventListener('mouseup', this.onDocumentMouseUp, false);
+        this.mouseXOnMouseDown = event.clientX - this.windowHalfX;
+        this.currentRotationXOnMouseDown = this.currentRotationX;
+    }
+
+    onDocumentMouseMove = (event: MouseEvent) => {
+        this.mouseX = event.clientX - this.windowHalfX;
+        this.mouseY = event.clientY - this.windowHalfY;
+        this.currentRotationX = this.currentRotationXOnMouseDown + (this.mouseX - this.mouseXOnMouseDown) * 0.01;
+        //game.camera.rotation.x += (this.currentRotationX - game.camera.rotation.x);
+        game.camera.rotation.y += (this.currentRotationX - game.camera.rotation.y);
+    }
+
+    onDocumentMouseUp = (event: MouseEvent) => {
+        document.removeEventListener('mousemove', this.onDocumentMouseMove);
+    }
+
+    bindKeyAction(camera: Camera) {
         this.controller.onKey_A(() => {
-            if (box) box.position.x -= 0.1;
+            if (Camera) camera.position.x -= 0.1;
         });
         this.controller.onKey_D(() => {
-            if (box) box.position.x += 0.1;
+            if (Camera) camera.position.x += 0.1;
         });
         this.controller.onKey_S(() => {
-            if (box) box.position.z += 0.1;
+            if (Camera) camera.position.z += 0.1;
         });
         this.controller.onKey_W(() => {
-            if (box) box.position.z -= 0.1;
+            if (Camera) camera.position.z -= 0.1;
+        });
+        this.controller.onKey_Space(() => {
+            if (Camera)
+                this.step += 0.07 
+            camera.position.y = 3 + (0.5 * Math.abs(Math.sin(this.step)))
         });
 
     }
@@ -62,7 +106,9 @@ export class FooGame {
     animate() {
         requestAnimationFrame(() => {
             this.animate();
+
         });
+
         this.updateObjects(this.scene);
         this.renderer.render(this.scene, this.camera);
     }
@@ -116,8 +162,13 @@ let game = new FooGame();
 
 game.loadScene(() => {
     let box = game.scene.getObjectByName("Box");
+    //let cam=game.scene.getObjectByName("Camera");
+
+    // if(game.camera){
+    //     game.bindKeyAction(game.camera);
+    // }
     if (box) {
-        game.bindKeyAction(box);
+        game.bindKeyAction(game.camera);
         game.setUpdate(box, (obj: Object3D) => {
             //game.camera.rotateOnAxis(obj.position, 0.01)
             //obj.position.x += performance.now() * 0.000001;