4.0 KiB
4.0 KiB
title, id, categories, tags, date
| title | id | categories | tags | date | |||||
|---|---|---|---|---|---|---|---|---|---|
| egret天空盒子浅尝 | 238 |
|
|
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)
}
最终效果->传送门 手机扫一扫
