public/index.html

@@ -6,7 +6,7 @@
     <style>
         body{
             margin: 0;
-            cursor: none;
+            cursor: pointer;
         }
     </style>
     

src/controller.ts

@@ -15,6 +15,11 @@ export class GameController {
         this.mouse = { dx: 0, dy: 0 }
         this.raycaster = new Raycaster();
 
+        this.root.onmouseup=()=>{
+            document.body.style.cursor = "none";
+            this.root.requestPointerLock();
+        };
+
         this.onKey_ESC();
         this.bindKey();
     }
@@ -34,6 +39,7 @@ 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);
+            
         };
     }
 
@@ -68,6 +74,7 @@ export class GameController {
     }
     private onKey_ESC() {
         this.callbackMap[27] = () => {
+            document.body.style.cursor = "pointer";
             document.exitPointerLock();
         };
     }

src/index.ts

@@ -1,9 +1,10 @@
 import * as THREE from "three"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Object3D, Mesh, ShaderMaterial, IcosahedronGeometry } from "three";
+import { Object3D, Mesh, ShaderMaterial, IcosahedronGeometry, TextureLoader, MeshStandardMaterial, Scene, HemisphereLight, Color, DirectionalLight, Vector3 } from "three";
 
 import { GameController } from "./controller"
 import { VaringBox } from "./shader_test"
+import { GameUtils } from './utils';
 
 export class FooGame {
 
@@ -11,29 +12,35 @@ export class FooGame {
     camera: THREE.Camera;
     renderer: THREE.WebGLRenderer;
 
+    light: THREE.Light;
+
     cam_fov = 70; //视角大小
     cam_aspect = window.innerWidth / window.innerHeight;
 
-    loader: GLTFLoader;
+    gltfLoader: GLTFLoader;
+    textureLoader: TextureLoader;
 
     updateMap: Object;
 
     controller: GameController;
 
     constructor() {
-        this.camera = new THREE.PerspectiveCamera(this.cam_fov, this.cam_aspect, 0.01, 10)
+        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.z = 1;
 
         this.scene = new THREE.Scene();
 
+        this.light = new DirectionalLight(new Color(0XFFFFFF), 0.4);
+        this.light.position.set(0, 15, 0);
+        this.scene.add(this.light);
         this.renderer = new THREE.WebGLRenderer();
         this.renderer.setSize(window.innerWidth, window.innerHeight);
 
         document.body.appendChild(this.renderer.domElement);
 
-        this.loader = new GLTFLoader();
+        this.gltfLoader = new GLTFLoader();
 
         this.updateMap = {};
 
@@ -41,6 +48,8 @@ export class FooGame {
         this.controller.bindMoveKeys(this.camera);
         this.controller.bindMouseLookAt(this.camera, this.scene);
 
+        this.textureLoader = new TextureLoader();
+
         this.animate();
     }
 
@@ -52,6 +61,7 @@ export class FooGame {
         this.renderer.render(this.scene, this.camera);
     }
 
+
     private updateObjects(obj: Object3D) {
 
         if ("update" in obj && (typeof obj["update"] == "function")) {
@@ -87,11 +97,16 @@ export class FooGame {
         });
     }
 
+    /**
+     * 加载场景
+     * @param callback 
+     */
     loadScene(callback: Function) {
-        this.loader.load("./scenes/foo.gltf", gltf => {
+
+        this.gltfLoader.load("./scenes/foo.gltf", gltf => {
             this.scene.add(gltf.scene);
-            let box = this.scene.getObjectByName("Box");
-            box && this.camera.lookAt(box.position);
+            //this.scene.background = new THREE.Color(0xffffff);
+
             callback();
         });
     }
@@ -99,32 +114,31 @@ export class FooGame {
 
 let game = new FooGame();
 
-
-
 game.loadScene(() => {
-    let box = game.scene.getObjectByName("Box");
-    let vBox = new VaringBox();
+    
+    let mat = GameUtils.makeRandomObjects(game.scene, 500);
+    FooGame.setUpdate(game.scene, (obj: Object3D) => {
+        mat.uniforms.time.value = performance.now() / 500;
+    });
+
     game.camera.lookAt(new THREE.Vector3(0, 0, 0));
-    if (box) {
-
-        FooGame.setUpdate(box, (obj: Mesh) => {
-            //obj.rotateY(0.01);
-            obj.material = vBox.material;
-            if (obj.material instanceof ShaderMaterial) {
-                let mat: ShaderMaterial = obj.material;
-               // mat.uniforms.time.value = performance.now() / 500;
-            }
-        });
-    }
 
-    let geo = new IcosahedronGeometry(1, 4);
-    let box2 = new THREE.Mesh(geo, vBox.material);
-    box2.position.x = 2;
-    box2.position.z = 1;
-    box2.position.y = 2;
 
-    game.scene.add(box2);
+    /**
+     * 设置天空盒子
+     */
+    let skybox = game.findObjectByName("Sphere");
+    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));
 
 })
 

src/utils.ts

@@ -0,0 +1,49 @@
+
+import { Object3D, BoxBufferGeometry, Color, MeshPhongMaterial, Material, IcosahedronBufferGeometry, TorusKnotBufferGeometry, SphereBufferGeometry } from 'three';
+import { Scene } from 'three';
+import { MeshStandardMaterial } from 'three';
+import { Mesh } from 'three';
+import { VaringBox } from './shader_test';
+import { ShaderMaterial } from 'three';
+import { FooGame } from './index';
+export class GameUtils {
+
+    static makeRandomObjects(scene: Scene, n: number = 100): ShaderMaterial {
+        let vBox = new VaringBox();
+        let geo = new BoxBufferGeometry(1, 1, 1);
+        let geo2 = new IcosahedronBufferGeometry(1, 3);
+        let geo3 = new SphereBufferGeometry(1, 40,40);
+
+        for (let i = 0; i < n; i++) {
+            let temp;
+            if (i % 2)
+                temp = new Mesh(geo, vBox.material);
+            if (i % 3) {
+                temp = new Mesh(geo3,vBox.material);
+            }
+            else
+                temp = new Mesh(geo2, vBox.material);
+
+            temp.position.set(Math.random() * 50, Math.random() * 10, Math.random() * 50);
+            temp.scale.set(
+                Math.random() * 2,
+                Math.random() * 2,
+                Math.random() * 2
+            )
+           FooGame.setUpdate(temp,(obj:Mesh)=>{
+                obj.position.x += Math.sin(performance.now()*0.0003+ obj.position.z);
+                obj.position.y += Math.sin(performance.now()*0.0002+ 4*obj.position.z);  
+            });
+            scene.add(temp);
+        }
+
+        return vBox.material;
+    }
+
+    static makeBox(): Mesh {
+        let vBox = new VaringBox();
+        let geo = new BoxBufferGeometry(1, 1, 1);
+
+        return new Mesh(geo, vBox.material);
+    }
+}