Egret – 3D(例子)

由于要开始制作H5跑酷类的游戏,所以需要不少游戏引擎不可缺少的元素,比如摄像机,所以花点时间来看看Egret3D,Egret官方例子运行如下(当然还有其它的例子,我们一个一个看下)。

  • 基础样例
  • /**
     * 立方体模型
     * 
     */
    class CubeSample {
    
        public constructor() {
            StageMgr.Instance().init();
            this.init();
        }
    
        private init() {
            let geom: egret3d.CubeGeometry = new egret3d.CubeGeometry(50, 100, 10);
            let mat: egret3d.TextureMaterial = new egret3d.TextureMaterial();
            let cube: egret3d.Mesh = new egret3d.Mesh(geom, mat);
            StageMgr.Instance().view3d.addChild3D(cube);
            this.InitCameraCtl();
            StageMgr.Instance().stage3d.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this);
        }
    
        private cameraCtl: egret3d.LookAtController;
        private InitCameraCtl() {
            this.cameraCtl = new egret3d.LookAtController(StageMgr.Instance().view3d.camera3D, new egret3d.Object3D());
            this.cameraCtl.distance = 300;
            this.cameraCtl.rotationX = 0;
        }
    
        public update(e: egret3d.Event3D) {
            this.cameraCtl.update();
        }
    }
    
  • 颜色材质样例
  • /**
     * 颜色材质
     * 
     */
    class ColorMaterialSample {
        public constructor() {
            StageMgr.Instance().init();
            this.init();
        }
    
        private init() {
    
            let geom: egret3d.CubeGeometry = new egret3d.CubeGeometry(128, 128, 128);
            let mat: egret3d.ColorMaterial = new egret3d.ColorMaterial(0xffff00);
            let cube: egret3d.Mesh = new egret3d.Mesh(geom, mat);
            StageMgr.Instance().view3d.addChild3D(cube);
    
            this.InitCameraCtl();
            StageMgr.Instance().stage3d.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this);
        }
    
        private cameraCtl: egret3d.LookAtController;
        private InitCameraCtl() {
            this.cameraCtl = new egret3d.LookAtController(StageMgr.Instance().view3d.camera3D, new egret3d.Object3D());
            this.cameraCtl.distance = 1000;
            this.cameraCtl.rotationX = 40;
            this.cameraCtl.rotationY = 40;
        }
    
        public update(e: egret3d.Event3D) {
            this.cameraCtl.update();
        }
    }
    
  • 光照样例
  • class DirectLightSample {
        public constructor() {
            StageMgr.Instance().init();
            this.init();
        }
    
        private loader: egret3d.UnitLoader;
        private init() {
    
            this.loader = new egret3d.UnitLoader("resource/texture/earth.png");
            this.loader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.onLoader, this);
        }
    
        private light: egret3d.DirectLight;
        private _lightDir: egret3d.Vector3D = new egret3d.Vector3D(0, -1, 0);
        private _rotationX: number = 0.01;
        private onLoader(e: egret3d.LoaderEvent3D) {
            let img: egret3d.ImageTexture = e.target.data;
    
            let geom: egret3d.SphereGeometry = new egret3d.SphereGeometry(200, 30, 30);
            let mat: egret3d.TextureMaterial = new egret3d.TextureMaterial(img);
            let earth: egret3d.Mesh = new egret3d.Mesh(geom, mat);
            StageMgr.Instance().view3d.addChild3D(earth);
    
            this.light = new egret3d.DirectLight(this._lightDir);
            this.light.diffuse = 0xffffff;
            this.light.intensity = 0.1;
            this.light.ambient = 0xffffffff;
    
            let group: egret3d.LightGroup = new egret3d.LightGroup();
            group.addLight(this.light);
            earth.material.lightGroup = group;
    
            this.InitCameraCtl();
            StageMgr.Instance().stage3d.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this);
        }
    
        private cameraCtl: egret3d.LookAtController;
        private InitCameraCtl() {
            this.cameraCtl = new egret3d.LookAtController(StageMgr.Instance().view3d.camera3D, new egret3d.Object3D());
            this.cameraCtl.distance = 1000;
            this.cameraCtl.rotationX = 0;
        }
    
        private _lightIntensity = 0.01;
        public update(e: egret3d.Event3D) {
            this.cameraCtl.update();
            if (this.light.intensity >= 0.5) {
                this._lightIntensity = -0.01;
            }
            if (this.light.intensity <= 0.1) {
                this._lightIntensity = 0.01;
            }
            this.light.intensity += this._lightIntensity;
    
            if (this.light.dir.x >= 1) {
                this._rotationX = -0.01;
            }
            if (this.light.dir.x <= -1) {
                this._rotationX = 0.01;
            }
            this.light.dir.x += this._rotationX;
        }
    }
    
  • 高度图模型样例
  • /**
     * 高度图模型
     * 
     */
    class ElevationSample {
    
        public constructor() {
            StageMgr.Instance().init();
            this.init();
        }
    
        private loader: egret3d.UnitLoader;
        private init() {
    
            this.loader = new egret3d.UnitLoader("resource/elevation/timg.jpg");
            this.loader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.onLoader, this);
        }
    
        private onLoader(e: egret3d.LoaderEvent3D) {
            let img: egret3d.ImageTexture = e.target.data;
    
            let geom: egret3d.ElevationGeometry = new egret3d.ElevationGeometry(img, 512, 100, 512);
            let mat: egret3d.TextureMaterial = new egret3d.TextureMaterial(img);
            let cube: egret3d.Mesh = new egret3d.Mesh(geom, mat);
            StageMgr.Instance().view3d.addChild3D(cube);
    
            this.InitCameraCtl();
            StageMgr.Instance().stage3d.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this);
        }
    
    
        private cameraCtl: egret3d.LookAtController;
        private InitCameraCtl() {
            this.cameraCtl = new egret3d.LookAtController(StageMgr.Instance().view3d.camera3D, new egret3d.Object3D());
            this.cameraCtl.distance = 300;
            this.cameraCtl.rotationX = 40;
        }
    
        public update(e: egret3d.Event3D) {
            this.cameraCtl.update();
        }
    }
    
  • 天空盒样例
  • /**
     * 天空盒
     * close
     */
    class SkyboxSample {
        public constructor() {
            StageMgr.Instance().init();
    
            this.init();
        }
    
        private queueLoader: egret3d.QueueLoader;
    
        private init() {
            this.queueLoader = new egret3d.QueueLoader();
    
            this.queueLoader.load("resource/skybox/cloudy_noon_BK.png");
            this.queueLoader.load("resource/skybox/cloudy_noon_DN.png");
            this.queueLoader.load("resource/skybox/cloudy_noon_FR.png");
            this.queueLoader.load("resource/skybox/cloudy_noon_LF.png");
            this.queueLoader.load("resource/skybox/cloudy_noon_RT.png");
            this.queueLoader.load("resource/skybox/cloudy_noon_UP.png");
    
            this.queueLoader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.onQueueLoader, this);
    
            //this.loader = new egret3d.UnitLoader("resource/skybox/cloudy_noon_BK.png");
            //this.loader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.onQueueLoader, this);
        }
    
        private loader: egret3d.UnitLoader;
    
        private onQueueLoader2(e: egret3d.LoaderEvent3D) {
            console.log("ede", this.queueLoader.getAsset("resource/skybox/cloudy_noon_UP.png"));
        }
    
        private onQueueLoader(e: egret3d.LoaderEvent3D) {
    
            //console.log(this.queueLoader.getAsset("resource/skybox/cloudy_noon_FR.png"));
            //console.log(this.queueLoader.getAsset("resource/skybox/cloudy_noon_BK.png"));
            //console.log(this.queueLoader.getAsset("resource/skybox/cloudy_noon_LF.png"));
            //console.log(this.queueLoader.getAsset("resource/skybox/cloudy_noon_RT.png"));
    
            let cubeTexture: egret3d.CubeTexture = egret3d.CubeTexture.createCubeTextureByImageTexture(
                this.queueLoader.getAsset("resource/skybox/cloudy_noon_FR.png"),
                this.queueLoader.getAsset("resource/skybox/cloudy_noon_BK.png"),
                this.queueLoader.getAsset("resource/skybox/cloudy_noon_LF.png"),
                this.queueLoader.getAsset("resource/skybox/cloudy_noon_RT.png"),
                this.queueLoader.getAsset("resource/skybox/cloudy_noon_UP.png"),
                this.queueLoader.getAsset("resource/skybox/cloudy_noon_DN.png")
            );
    
            let mat: egret3d.CubeTextureMaterial = new egret3d.CubeTextureMaterial(cubeTexture);
            let cube: egret3d.CubeGeometry = new egret3d.CubeGeometry(50, 50, 50);//10000, 10000, 10000);
            //cube.buildGeomtry(false);
            let sky: egret3d.Sky = new egret3d.Sky(cube, mat, StageMgr.Instance().view3d.camera3D);
            StageMgr.Instance().view3d.addChild3D(sky);
    
            console.log("load")
            let img: egret3d.ImageTexture = this.queueLoader.getAsset("resource/skybox/cloudy_noon_UP.png");
            let mat2: egret3d.TextureMaterial = new egret3d.TextureMaterial(img);
            let a: egret3d.Mesh = new egret3d.Mesh(cube, mat2);
            StageMgr.Instance().view3d.addChild3D(a);
    
            this.InitCameraCtl();
            StageMgr.Instance().stage3d.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this);
        }
    
        private cameraCtl: egret3d.LookAtController;
        private InitCameraCtl() {
            this.cameraCtl = new egret3d.LookAtController(StageMgr.Instance().view3d.camera3D, new egret3d.Object3D());
            this.cameraCtl.distance = 300;
            this.cameraCtl.rotationX = 0;
        }
    
        public update(e: egret3d.Event3D) {
            this.cameraCtl.update();
        }
    }
    
  • 纹理样例
  • /**
     * 纹理材质
     * 
     */
    class TextureMaterialSample {
        public constructor() {
            StageMgr.Instance().init();
            this.init();
        }
    
        private loader: egret3d.UnitLoader;
        private init() {
    
            this.loader = new egret3d.UnitLoader("resource/texture/Icon.png");
            this.loader.addEventListener(egret3d.LoaderEvent3D.LOADER_COMPLETE, this.onLoader, this);
        }
    
        private onLoader(e: egret3d.LoaderEvent3D) {
            let img: egret3d.ImageTexture = e.target.data;
    
            let geom: egret3d.CubeGeometry = new egret3d.CubeGeometry(128, 128, 128);
            let mat: egret3d.TextureMaterial = new egret3d.TextureMaterial(img);
            let cube: egret3d.Mesh = new egret3d.Mesh(geom, mat);
            StageMgr.Instance().view3d.addChild3D(cube);
    
            this.InitCameraCtl();
            StageMgr.Instance().stage3d.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this);
        }
    
        private cameraCtl: egret3d.LookAtController;
        private InitCameraCtl() {
            this.cameraCtl = new egret3d.LookAtController(StageMgr.Instance().view3d.camera3D, new egret3d.Object3D());
            this.cameraCtl.distance = 1000;
            this.cameraCtl.rotationX = 40;
            this.cameraCtl.rotationY = 40;
        }
    
        public update(e: egret3d.Event3D) {
            this.cameraCtl.update();
        }
    }
    
  • 线框渲染样例
  • /**
     * 线框渲染
     * 
     */
    class WireframeSample {
        public constructor() {
            StageMgr.Instance().init();
    
            this.init();
        }
    
        private init() {
            let geom: egret3d.CubeGeometry = new egret3d.CubeGeometry(100, 100, 100);
            let wf: egret3d.Wireframe = new egret3d.Wireframe();
            wf.fromGeometry(geom);
            wf.fromVertexs(egret3d.VertexFormat.VF_POSITION);
            StageMgr.Instance().view3d.addChild3D(wf);
    
            this.InitCameraCtl();
            StageMgr.Instance().stage3d.addEventListener(egret3d.Event3D.ENTER_FRAME, this.update, this);
        }
    
        private cameraCtl: egret3d.LookAtController;
        private InitCameraCtl() {
            this.cameraCtl = new egret3d.LookAtController(StageMgr.Instance().view3d.camera3D, new egret3d.Object3D());
            this.cameraCtl.distance = 300;
            this.cameraCtl.rotationX = 0;
        }
    
        public update(e: egret3d.Event3D) {
            this.cameraCtl.update();
        }
    }
    

    欢迎留言

    avatar
      Subscribe  
    Notify of