初始化

2020-11-23 18:59:26 +08:00
commit 5efd5b9c40
@@ -0,0 +1,93 @@
+---
+title: egret天空盒子浅尝
+tags: []
+id: '238'
+categories:
+  - - 分享
+date: 2017-11-22 18:35:36
+---
+
+现在移动端越来越多类VR的推广H5页面需求，egret恰好也有相关的API可以方便我们使用，这就是egret的天空盒子-**egret3d.Sky** 在 Egret 3D 所创建的空间中最外层是由天空盒子来包裹起来的。我们通常使用天空盒子来展现风景，地平线，天空，星空等等空间的“大背景”。天空盒子由一组无缝的贴图包裹起来的盒状空间。当我们的 3D 场景中包含有物体时，天空盒子总是充当其背景。 ![天空盒子](https://image.dengtongyu.com/blog/2017/11/images.jpeg) 环境：egret 5.0.12 IDE：egret wing 3
+
+# 加载天空盒子素材资源
+
+通过**egret3d.QueueLoader**加载器加载资源，然后监听资源加载完成事件**egret3d.LoaderEvent3D.LOADER\_COMPLETE**。
+
+```
+
+    /**
+     *  加载器
+     */
+    private queueLoader: egret3d.QueueLoader;
+    // 加载天空盒资源
+    private loaderSkyBox() {
+        this.queueLoader = new egret3d.QueueLoader();
+        this.queueLoader.load("resource/front.png");
+        this.queueLoader.load("resource/back.png");
+        this.queueLoader.load("resource/left.png");
+        this.queueLoader.load("resource/right.png");
+        this.queueLoader.load("resource/up.png");
+        this.queueLoader.load("resource/down.png");
+        this.queueLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.onSkyBoxTexture, this);
+    }
+```
+
+# 创建天空盒子
+
+资源加载完成后，用**egret3d.Sky**创建天空盒子，**egret3d.Sky**方法有三个参数， Sky(geometry:egret3d.Geometry, material:egret3d.MaterialBase, camera:egret3d.Camera3D), 分别是3D几何形状，纹理贴图，摄像机。然后把天空盒子添加到3D显示类里。
+
+```
+
+    // 天空盒资源加载完成 创建天空盒
+    private onSkyBoxTexture(e: egret3d.LoaderEvent3D) {
+        var loader: egret3d.QueueLoader = e.target;
+
+        var fr: egret3d.ITexture = loader.getAsset("resource/front.png");
+        var bk: egret3d.ITexture = loader.getAsset("resource/back.png");
+        var lf: egret3d.ITexture = loader.getAsset("resource/left.png");
+        var rt: egret3d.ITexture = loader.getAsset("resource/right.png");
+        var up: egret3d.ITexture = loader.getAsset("resource/up.png");
+        var dn: egret3d.ITexture = loader.getAsset("resource/down.png");
+
+        // 创建cube贴图
+        var cubeTexture: egret3d.CubeTexture = egret3d.CubeTexture.createCubeTextureByImageTexture(bk, fr, lf, rt, up, dn);
+
+        // 创建cube geometry 和 cube 材质
+        var sky: egret3d.Sky = new egret3d.Sky(new egret3d.CubeGeometry(500, 500, 500), new egret3d.CubeTextureMaterial(cubeTexture), this.view.camera3D);
+        // 设置天空盒 渲染模式为背面渲染
+        sky.material.cullMode = egret3d.ContextConfig.FRONT;
+        this.view.addChild3D(sky);
+        
+    }
+```
+
+# 获取陀螺仪信息
+
+我们需要通过获取陀螺仪信息来根据手机的旋转，让天空盒子视角旋转对应的角度。
+
+```
+
+    // 获取设备旋转角度
+    private setOrientation() {
+        //创建 DeviceOrientation 类
+        var orientation = new egret.DeviceOrientation();
+        //添加事件监听器
+        orientation.addEventListener(egret.Event.CHANGE,this.onOrientation,this);
+        //开始监听设备方向变化
+        orientation.start();
+    }
+
+    private onOrientation(e:egret.OrientationEvent){
+        this._alpha = e.alpha;
+        this._beta = e.beta;
+        this._gamma = e.gamma;
+       
+        this.cameraCtl.rotationY = (this._alpha % 360) * (-1);
+        this.cameraCtl.rotationX = (this._beta - 90) % 360 * (-1);
+        this.cameraCtl.rotationZ = 0;
+
+        //console.log(e.rotationRate)
+    }
+```
+
+最终效果->[传送门](https://demo.dengtongyu.com/pages/boxsky/) 手机扫一扫 ![egret天空盒子demo](https://image.dengtongyu.com/blog/2017/11/下载-2.png)