104 lines
4.0 KiB
Markdown
104 lines
4.0 KiB
Markdown
---
|
||
title: egret天空盒子浅尝
|
||
id: '238'
|
||
categories:
|
||
- 分享
|
||
tags:
|
||
- egret
|
||
- 天空盒子
|
||
- QueueLoader
|
||
- LoaderEvent3D
|
||
date: 2017-11-22 18:35:36
|
||
---
|
||
|
||
现在移动端越来越多类VR的推广H5页面需求，egret恰好也有相关的API可以方便我们使用，这就是egret的天空盒子-**egret3d. Sky** 在 Egret 3D 所创建的空间中最外层是由天空盒子来包裹起来的。我们通常使用天空盒子来展现风景，地平线，天空，星空等等空间的“大背景”。天空盒子由一组无缝的贴图包裹起来的盒状空间。当我们的 3D 场景中包含有物体时，天空盒子总是充当其背景。
|
||
|
||
|
||
|
||
环境：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/boxsky/) 手机扫一扫
|
||
|
||
|