using transform matirx

public/scenes/campus/index.json

@@ -0,0 +1 @@
+{"date":"2020/04/27 16:46:52","author":"uinnvoa","description":"","license":"优锘科技版权所有","camInfo":{"eye":"-25.916 33.351 -6.956","target":"-9.081 7.755 10.079"},"version":"1.1.0"}

public/scenes/campus/scene.json

@@ -0,0 +1 @@
+{"camInfo":{"eye":"-25.916 33.351 -6.956","target":"-9.081 7.755 10.079"},"id":"0","gltfid":"node_World_-15956","outdoors":{"id":"1","gltfid":"node_FloorPlan_-15966","structure":{"placements":[{"id":"-57192","gltfid":"node_CombinePlacement_-57192"},{"id":"-57202","gltfid":"node_CombinePlacement_-57202"},{"id":"-57212","gltfid":"node_CombinePlacement_-57212"}]}}}

src/controller.ts

@@ -1,11 +1,13 @@
-import { Object3D, Raycaster, Camera, Scene, Euler } from "three";
+import { Object3D, Raycaster, Camera, Scene, Euler, Vector3 } from "three";
 import { FooGame } from './index';
 
 export class GameController {
     root: HTMLElement;
     mouse: { dx: number, dy: number };
     callbackMap: any;
+    axisZ = new Vector3(0, 0, 1).normalize();
 
+    private vec: Vector3 = new Vector3();
     private raycaster: Raycaster;
 
     constructor(root: HTMLElement) {
@@ -15,7 +17,7 @@ export class GameController {
         this.mouse = { dx: 0, dy: 0 }
         this.raycaster = new Raycaster();
 
-        this.root.onmouseup=()=>{
+        this.root.onmouseup = () => {
             document.body.style.cursor = "none";
             this.root.requestPointerLock();
         };
@@ -39,22 +41,38 @@ export class GameController {
             eu.y -= this.mouse.dx * 0.001;
             eu.x = Math.max(- PI_2, Math.min(PI_2, eu.x));
             cam.quaternion.setFromEuler(eu);
-            
+
         };
     }
 
     bindMoveKeys(box: Object3D) {
         this.onKey_A(() => {
-            if (box) box.position.x -= 0.1;
+            if (box) {
+                //旋转矩阵的x向量
+                this.vec.setFromMatrixColumn(box.matrix, 0);
+                box.position.addScaledVector(this.vec, -0.1);
+            }
         });
         this.onKey_D(() => {
-            if (box) box.position.x += 0.1;
+            if (box) {
+                //旋转矩阵的x向量
+                this.vec.setFromMatrixColumn(box.matrix, 0);
+                box.position.addScaledVector(this.vec, 0.1);
+            }
         });
         this.onKey_S(() => {
-            if (box) box.position.z += 0.1;
+            if (box) {
+                this.vec.setFromMatrixColumn(box.matrix, 0);
+                this.vec.crossVectors(box.up, this.vec);
+                box.position.addScaledVector(this.vec, -0.1);
+            }
         });
         this.onKey_W(() => {
-            if (box) box.position.z -= 0.1;
+            if (box) {
+                this.vec.setFromMatrixColumn(box.matrix, 0);
+                this.vec.crossVectors(box.up, this.vec);
+                box.position.addScaledVector(this.vec, 0.1);
+            }
         });
     }
 
@@ -82,6 +100,7 @@ export class GameController {
     private bindKey() {
         this.root.onkeypress = (event) => {
             let c = event.keyCode;
+             
             if (this.callbackMap[c]) {
                 this.callbackMap[c]();
             }

src/index.ts

@@ -1,6 +1,6 @@
 import * as THREE from "three"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Object3D, Mesh, ShaderMaterial, IcosahedronGeometry, TextureLoader, MeshStandardMaterial, Scene, HemisphereLight, Color, DirectionalLight, Vector3 } from "three";
+import { Object3D, Mesh, ShaderMaterial, IcosahedronGeometry, TextureLoader, MeshStandardMaterial, Scene, HemisphereLight, Color, DirectionalLight, Vector3, AmbientLight, PlaneBufferGeometry, MeshPhongMaterial } from "three";
 
 import { GameController } from "./controller"
 import { VaringBox } from "./shader_test"
@@ -27,13 +27,15 @@ export class FooGame {
     constructor() {
         this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 1, 1000)
         this.camera.position.x = -1;
-        this.camera.position.y = 1;
+        this.camera.position.y = 2;
         this.camera.position.z = 1;
 
         this.scene = new THREE.Scene();
 
-        this.light = new DirectionalLight(new Color(0XFFFFFF), 0.4);
+        this.light = new HemisphereLight(new Color(0XFFFFFF), new Color(0x000000), 1);
         this.light.position.set(0, 15, 0);
+
+        this.scene.add(new AmbientLight(new Color(0xffffff), 1));
         this.scene.add(this.light);
         this.renderer = new THREE.WebGLRenderer();
         this.renderer.setSize(window.innerWidth, window.innerHeight);
@@ -103,9 +105,11 @@ export class FooGame {
      */
     loadScene(callback: Function) {
 
-        this.gltfLoader.load("./scenes/foo.gltf", gltf => {
+        this.gltfLoader.load("./scenes/campus/Unity2GLTF.gltf", gltf => {
+            console.log(gltf);
+
             this.scene.add(gltf.scene);
-            //this.scene.background = new THREE.Color(0xffffff);
+            this.scene.background = new THREE.Color('rgb(191,196,234)');
 
             callback();
         });
@@ -115,12 +119,22 @@ export class FooGame {
 let game = new FooGame();
 
 game.loadScene(() => {
-    
-    let mat = GameUtils.makeRandomObjects(game.scene, 500);
+
+    /*let mat = GameUtils.makeRandomObjects(game.scene, 500);
     FooGame.setUpdate(game.scene, (obj: Object3D) => {
         mat.uniforms.time.value = performance.now() / 500;
     });
+*/
 
+    let geoGround = new PlaneBufferGeometry(200, 200, 100, 200);
+    let matGround = new MeshPhongMaterial({
+        color: "rgb(50,50,50)"
+    });
+
+    let ground = new Mesh(geoGround, matGround);
+    ground.rotation.x = -Math.PI / 2;
+    ground.position.y = -2;
+    game.scene.add(ground);
     game.camera.lookAt(new THREE.Vector3(0, 0, 0));
 
 
@@ -128,17 +142,12 @@ game.loadScene(() => {
      * 设置天空盒子
      */
     let skybox = game.findObjectByName("Sphere");
-    if(skybox instanceof Mesh){
-        let mesh:Mesh = skybox;
-        if(mesh.material instanceof MeshStandardMaterial){
-            let mat:MeshStandardMaterial = mesh.material;
+    if (skybox instanceof Mesh) {
+        let mesh: Mesh = skybox;
+        if (mesh.material instanceof MeshStandardMaterial) {
+            let mat: MeshStandardMaterial = mesh.material;
             mat.side = THREE.BackSide;
         }
     }
-
-    console.log(game.camera.matrix);
-    console.log(new Vector3().setFromMatrixPosition(game.camera.matrix));
-    console.log(new Vector3().setFromMatrixColumn(game.camera.matrix, 0));
-
 })