---
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)