skybox

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();
     }
@@ -68,6 +73,7 @@ export class GameController {
     }
     private onKey_ESC() {
         this.callbackMap[27] = () => {
+            document.body.style.cursor = "pointer";
             document.exitPointerLock();
         };
     }
@@ -75,6 +81,8 @@ 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,6 +1,6 @@
 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 } from "three";
 
 import { GameController } from "./controller"
 import { VaringBox } from "./shader_test"
@@ -14,7 +14,8 @@ export class FooGame {
     cam_fov = 70; //视角大小
     cam_aspect = window.innerWidth / window.innerHeight;
 
-    loader: GLTFLoader;
+    gltfLoader: GLTFLoader;
+    textureLoader: TextureLoader;
 
     updateMap: Object;
 
@@ -33,7 +34,7 @@ export class FooGame {
 
         document.body.appendChild(this.renderer.domElement);
 
-        this.loader = new GLTFLoader();
+        this.gltfLoader = new GLTFLoader();
 
         this.updateMap = {};
 
@@ -41,6 +42,8 @@ export class FooGame {
         this.controller.bindMoveKeys(this.camera);
         this.controller.bindMouseLookAt(this.camera, this.scene);
 
+        this.textureLoader = new TextureLoader();
+
         this.animate();
     }
 
@@ -87,13 +90,59 @@ 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.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);
+            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.add(skybox);
+            });
+
+            /**
+             * 加载完毕，回调
+             */
             callback();
         });
+
     }
 }
 
@@ -102,20 +151,8 @@ let game = new FooGame();
 
 
 game.loadScene(() => {
-    let box = game.scene.getObjectByName("Box");
     let vBox = new VaringBox();
-    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;
-            }
-        });
-    }
+    vBox.material.wireframe = true;
 
     let geo = new IcosahedronGeometry(1, 4);
     let box2 = new THREE.Mesh(geo, vBox.material);
@@ -124,7 +161,15 @@ game.loadScene(() => {
     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;
+        }
+    });
 
-
+    game.camera.lookAt(new THREE.Vector3(0, 0, 0));
 })