game utils

src/controller.ts

@@ -39,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);
+            
         };
     }
 
@@ -81,8 +82,6 @@ export class GameController {
     private bindKey() {
         this.root.onkeypress = (event) => {
             let c = event.keyCode;
-            console.log(c);
-            
             if (this.callbackMap[c]) {
                 this.callbackMap[c]();
             }

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, TextureLoader, MeshStandardMaterial, Scene } 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,6 +12,8 @@ export class FooGame {
     camera: THREE.Camera;
     renderer: THREE.WebGLRenderer;
 
+    light: THREE.Light;
+
     cam_fov = 70; //视角大小
     cam_aspect = window.innerWidth / window.innerHeight;
 
@@ -22,13 +25,16 @@ export class FooGame {
     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);
 
@@ -55,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")) {
@@ -91,85 +98,47 @@ export class FooGame {
     }
 
     /**
-     * 创建球体
-     */
-    createSphere() {
-        let geo = new THREE.SphereBufferGeometry(15, 100,100);
-        
-        //let geo = new THREE.BoxBufferGeometry(5,5,5);
-
-        let mat = new THREE.MeshStandardMaterial();
-        mat.side = THREE.BackSide; //设置渲染面会背面
-        mat.blending = THREE.NormalBlending;
-        let obj = new THREE.Mesh(geo, mat);
-        return obj;
-    }
-
-    /**
      * 加载场景
      * @param callback 
      */
     loadScene(callback: Function) {
+
         this.gltfLoader.load("./scenes/foo.gltf", gltf => {
             this.scene.add(gltf.scene);
-            let s = this.findObjectByName("Sphere");
-            if(s && s instanceof Mesh){
-                let mesh :Mesh = s;
-                if(mesh.material instanceof MeshStandardMaterial){
-                    let mat:MeshStandardMaterial = mesh.material;
-                    mat .side = THREE.BackSide;
-                }
-            }
-            /**
-             * 加载二位图片作为场景背景
-             */
-            this.textureLoader.load("./textures/skybox2.jpg", (tex) => {
-                //this.scene.background = tex; //直接设置二维背景
-
-                //设置天空盒子背景
-                let skybox = this.createSphere();
-                if (skybox.material instanceof MeshStandardMaterial) {
-                    let mat: MeshStandardMaterial = skybox.material;
-                    mat.emissive = new THREE.Color(0x00ffff);
-                    mat.emissiveMap = tex;
-                }
+            //this.scene.background = new THREE.Color(0xffffff);
 
-                //this.scene.add(skybox);
-            });
-
-            /**
-             * 加载完毕，回调
-             */
             callback();
         });
-
     }
 }
 
 let game = new FooGame();
 
-
-
 game.loadScene(() => {
-    let vBox = new VaringBox();
-    vBox.material.wireframe = true;
-
-    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);
-    FooGame.setUpdate(box2, (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 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));
+
+
+    /**
+     * 设置天空盒子
+     */
+    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);
+    }
+}