现在移动端越来越多类VR的推广H5页面需求，egret恰好也有相关的API可以方便我们使用，这就是egret的天空盒子-egret3d. Sky 在 Egret 3D 所创建的空间中最外层是由天空盒子来包裹起来的。我们通常使用天空盒子来展现风景，地平线，天空，星空等等空间的“大背景”。天空盒子由一组无缝的贴图包裹起来的盒状空间。当我们的 3D 场景中包含有物体时，天空盒子总是充当其背景。

天空盒子

环境：egret 5.0.12 IDE：egret wing 3

加载天空盒子素材资源

通过egret3d. QueueLoader加载器加载资源，然后监听资源加载完成事件egret3d. LoaderEvent3D. LOADER_COMPLETE。

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**
 *  加载器
 */
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显示类里。

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 天空盒资源加载完成 创建天空盒
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);
    
}

获取陀螺仪信息

我们需要通过获取陀螺仪信息来根据手机的旋转，让天空盒子视角旋转对应的角度。

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 获取设备旋转角度
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)
}

最终效果->传送门 手机扫一扫

egret天空盒子demo