Skip to content

Latest commit

 

History

History
executable file
·
665 lines (509 loc) · 24.6 KB

File metadata and controls

executable file
·
665 lines (509 loc) · 24.6 KB

使用wing创建项目

  • 下载安装wing

登陆白鹭引擎官方网站,成功下载并安装EgretEngine和wing后启动,如图所示:


  • 创建Egret3D项目工程

打开文件->新建项目,选择Egret3D项目,输入名称HelloWorld后,点击完成,点击运行查看导出默认3d内容。


  • Hello Egret3D

1) 打开src文件夹下的Main.ts文件,删除模板代码。输入如下代码:

class Main extends egret.DisplayObject{
	
    public constructor() {
        super();
        
    }
}     

2) 打开index.html文件,修改<body></body>内代码,如下所示:

<body>

    <div style="margin: auto;width: 100%;height: 100%;" class="egret-player" 
        data-entry-class="Main"
        data-orientation="auto"
        data-scale-mode="noScale"
        data-frame-rate="30"
        data-content-width="640"
        data-content-height="960"
        data-show-paint-rect="false"
        data-multi-fingered="2"
        data-show-fps="false" data-show-log="false"
        data-log-filter="" data-show-fps-style="x:0,y:0,size:30,textColor:0x00c200,bgAlpha:0.9">
    </div>
    
    <script>
        setTimeout( function () {
			egret.runEgret();
		},300);
    </script>
    
</body>


  • 创建Egret3DCanvas

1)什么是Egret3DCanvas:
	a) Egret3DCanvas可以理解为渲染的画布,为我们绘制画面提供支持。
	b) Egret3DCanvas构造后,需要定义起始点位置,和画布大小来控制我们显示内容的位置。
	c) 它继承EventDispatcher,可以监听部分事件,如:Event3D.ENTER_FRAME,每帧响应回调事件。
	d) 一个Egret3DCanvas可以渲染多个View3D内容,至于View3D的内容以及与Egret3DCanvas关系将在下一节说明。
	e) 代码示例:

		class Main extends egret.DisplayObject {
		
		    // Canvas操作对象
		    protected _egret3DCanvas: egret3d.Egret3DCanvas;
		
		    public constructor() {
		        super();
		        console.log("Hello World,Hello Egret3D");
		        //创建Canvas对象。
		        this._egret3DCanvas = new egret3d.Egret3DCanvas();
		        //Canvas的起始坐标,页面左上角为起始坐标(0,0)。
		        this._egret3DCanvas.x = 0;
		        this._egret3DCanvas.y = 0;
		        //设置Canvas页面尺寸。
		        this._egret3DCanvas.width = window.innerWidth;
		        this._egret3DCanvas.height = window.innerHeight;
		        //启动_egret3DCanvas
		        this._egret3DCanvas.start();
		        
		    }
		}


  • 创建View3D

1)什么是View3D:
	a) View3D是整个3D引擎的渲染视口,可以控制渲染窗口的大小,渲染的方式。
	b) View3D内可以控制相机Camera3D,场景元素Scene3D,当前的View3D中会有一个Scene3D的节点和一个Camera3D来进行场景中的渲染。
	c) View3D创建后,一般会保存在Egret3DCanvas中的View3D列表内,Egret3DCanvas会依次调用列表内View3D的主循环方法:
		public update(time: number, delay: number)。
	d)Egret3DCanvas与View3D关系图:

	e) 代码示例:

		class Main extends egret.DisplayObject {
		
		
		    // Canvas操作对象
		    protected _egret3DCanvas: egret3d.Egret3DCanvas;
		    // View3D操作对象
		    protected _view3D: egret3d.View3D;
		
		    public constructor() {
		        super();
		        //创建Canvas对象。
		        this._egret3DCanvas = new egret3d.Egret3DCanvas();
		        //Canvas的起始坐标,页面左上角为起始坐标(0,0)。
		        this._egret3DCanvas.x = 0;
		        this._egret3DCanvas.y = 0;
		        //设置Canvas页面尺寸。
		        this._egret3DCanvas.width = window.innerWidth;
		        this._egret3DCanvas.height = window.innerHeight;
		
		        //创建View3D对象,页面左上角为起始坐标(0,0)
		        this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight);
		        //当前对象对视位置,其参数依次为:
		        //@param pos 对象的位置
		        //@param target 目标的位置
		        this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 0, 1000), new egret3d.Vector3D(0, 0, 0));
		        //View3D的背景色设置
		        this._view3D.backColor = 0xffffff;
		        //将View3D添加进Canvas中
		        this._egret3DCanvas.addView3D(this._view3D);
		
		
		        //启动_egret3DCanvas
		        this._egret3DCanvas.start();
		
		
		        console.log("Hello World,Hello Egret3D");
		    }
		}

  • 添加物体

1)Egret3D内定义了许多内置模型,比如CubeGeometry,CylinderGeometry,PlaneGeometry等常用模型数据,这里我们选取PlaneGeometry和CubeGeometry
	作为内容,添加至引擎内。
	a)示例代码:

		class Main extends egret.DisplayObject {
		
		
		    // Canvas操作对象
		    protected _egret3DCanvas: egret3d.Egret3DCanvas;
		    // View3D操作对象
		    protected _view3D: egret3d.View3D;
		
		    public constructor() {
		        super();
		        //创建Canvas对象。
		        this._egret3DCanvas = new egret3d.Egret3DCanvas();
		        //Canvas的起始坐标,页面左上角为起始坐标(0,0)。
		        this._egret3DCanvas.x = 0;
		        this._egret3DCanvas.y = 0;
		        //设置Canvas页面尺寸。
		        this._egret3DCanvas.width = window.innerWidth;
		        this._egret3DCanvas.height = window.innerHeight;
		
		        //创建View3D对象,页面左上角为起始坐标(0,0)
		        this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight);
		        //当前对象对视位置,其参数依次为:
		        //@param pos 对象的位置
		        //@param target 目标的位置
		        this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 1000, 1000), new egret3d.Vector3D(0, 0, 0));
		        //View3D的背景色设置
		        this._view3D.backColor = 0xffffff;
		        //将View3D添加进Canvas中
		        this._egret3DCanvas.addView3D(this._view3D);
		
		
		        //启动_egret3DCanvas
		        this._egret3DCanvas.start();
		
		
		        //创建立方体,放置于场景内(0,0,0)位置
		        //创建一个红色的颜色材质球
		        var mat_cube: egret3d.ColorMaterial = new egret3d.ColorMaterial(0xff0000);
		        //使用内置cube数据构造出一个默认参数cube
		        var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry();
		        //通过材质球和geometery数据创建一个mesh对象
		        var cube = new egret3d.Mesh(geometery_Cube, mat_cube);
		        //将mesh节点添加到View3D内
		        this._view3D.addChild3D(cube);
		
		
		        ///创建面片,放置于场景内(0,0,0)位置
		        ///创建一个绿色的颜色材质球
		        var mat_Plane: egret3d.ColorMaterial = new egret3d.ColorMaterial(0x00ff00);
		        //使用内置Plane数据构造出一个默认参数Plane
		        var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry();
		         //通过材质球和geometery数据创建一个mesh对象
		        var plane = new egret3d.Mesh(geometery_Plane, mat_Plane);
		        //将mesh节点添加到View3D内
		        this._view3D.addChild3D(plane);
		
		
		        console.log("Hello World,Hello Egret3D");
		    }
		}

2)除了使用内置数据生成模型数据,我们还可以使用自己定义的数据来构建模型。
	a) 示例代码:

		class Main extends egret.DisplayObject {
		
		
		    // Canvas操作对象
		    protected _egret3DCanvas: egret3d.Egret3DCanvas;
		    // View3D操作对象
		    protected _view3D: egret3d.View3D;
		
		    public constructor() {
		        super();
		        //创建Canvas对象。
		        this._egret3DCanvas = new egret3d.Egret3DCanvas();
		        //Canvas的起始坐标,页面左上角为起始坐标(0,0)。
		        this._egret3DCanvas.x = 0;
		        this._egret3DCanvas.y = 0;
		        //设置Canvas页面尺寸。
		        this._egret3DCanvas.width = window.innerWidth;
		        this._egret3DCanvas.height = window.innerHeight;
		
		        //创建View3D对象,页面左上角为起始坐标(0,0)
		        this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight);
		        //当前对象对视位置,其参数依次为:
		        //@param pos 对象的位置
		        //@param target 目标的位置
		        this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 500, 500), new egret3d.Vector3D(0, 0, 0));
		        //View3D的背景色设置
		        this._view3D.backColor = 0xffffff;
		        //将View3D添加进Canvas中
		        this._egret3DCanvas.addView3D(this._view3D);
		
		
		        //启动_egret3DCanvas
		        this._egret3DCanvas.start();
		
		
		        //创建立方体,放置于场景内(0,0,0)位置
		        //创建一个红色的颜色材质球
		        var mat_cube: egret3d.ColorMaterial = new egret3d.ColorMaterial(0xff0000);
		        //使用内置cube数据构造出一个默认参数cube
		        var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry();
		        //通过材质球和geometery数据创建一个mesh对象
		        var cube = new egret3d.Mesh(geometery_Cube, mat_cube);
		        //将mesh节点添加到View3D内
		        this._view3D.addChild3D(cube);
		
		
		        ///创建面片,放置于场景内(0,0,0)位置
		        ///创建一个绿色的颜色材质球
		        var mat_Plane: egret3d.ColorMaterial = new egret3d.ColorMaterial(0x00ff00);
		        //使用内置Plane数据构造出一个默认参数Plane
		        var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry();
		        //通过材质球和geometery数据创建一个mesh对象
		        var plane = new egret3d.Mesh(geometery_Plane, mat_Plane);
		        //将mesh节点添加到View3D内
		        this._view3D.addChild3D(plane);
		
		        //自定三角面
		        this.createTriangle();
		
		        console.log("Hello World,Hello Egret3D");
		    }
		
		    //自定义数据构造一个三角面片
		    protected createTriangle() {
		        var geom: egret3d.Geometry = egret3d.GeometryUtil.createGeometry();
		
		        var vb: number[] = [];
		        var ib: number[] = [];
		
		        // 0 1 2 坐标 3 4 5 6 颜色 7 8 uv
		        vb.push(-50, -50, 0, 1, 0, 0, 1);
		        vb.push(0, 50, 0, 0, 1, 0, 1);
		        vb.push(50, -50, 0, 0, 0, 1, 1);
		        // 加入3个顶点       
		
		        // 设置顶点索引  3个索引  1个3角形面
		        ib.push(0, 1, 2);
		
		        // 把数据填充进Geometry
		        geom.setVerticesForIndex(0, egret3d.VertexFormat.VF_POSITION | egret3d.VertexFormat.VF_COLOR, vb, 3);
		        geom.setVertexIndices(0, ib);
		
		        // 使用Geometry 创建Mesh
		        var mesh: egret3d.Mesh = new egret3d.Mesh(geom, new egret3d.ColorMaterial(0xffffff));
		
		        // 设置双面渲染
		        mesh.material.bothside = true;
		
		        this._view3D.addChild3D(mesh);
		
		        mesh.x = -200;
		    }
		
		
		}

	2)除了颜色材质球的使用,引擎还提供贴图材质球的使用。
		a) 示例代码:

		class Main extends egret.DisplayObject {
		
		
		    // Canvas操作对象
		    protected _egret3DCanvas: egret3d.Egret3DCanvas;
		    // View3D操作对象
		    protected _view3D: egret3d.View3D;
		
		    public constructor() {
		        super();
		        //创建Canvas对象。
		        this._egret3DCanvas = new egret3d.Egret3DCanvas();
		        //Canvas的起始坐标,页面左上角为起始坐标(0,0)。
		        this._egret3DCanvas.x = 0;
		        this._egret3DCanvas.y = 0;
		        //设置Canvas页面尺寸。
		        this._egret3DCanvas.width = window.innerWidth;
		        this._egret3DCanvas.height = window.innerHeight;
		
		        //创建View3D对象,页面左上角为起始坐标(0,0)
		        this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight);
		        //当前对象对视位置,其参数依次为:
		        //@param pos 对象的位置
		        //@param target 目标的位置
		        this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 500, 500), new egret3d.Vector3D(0, 0, 0));
		        //View3D的背景色设置
		        this._view3D.backColor = 0xffffff;
		        //将View3D添加进Canvas中
		        this._egret3DCanvas.addView3D(this._view3D);
		
		
		        //启动_egret3DCanvas
		        this._egret3DCanvas.start();
		
		
		        //创建立方体,放置于场景内(0,0,0)位置
		        //创建一个默认的贴图材质球
		        var mat_cube: egret3d.TextureMaterial = new egret3d.TextureMaterial();
		        //使用内置cube数据构造出一个默认参数cube
		        var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry();
		        //通过材质球和geometery数据创建一个mesh对象
		        var cube = new egret3d.Mesh(geometery_Cube, mat_cube);
		        //将mesh节点添加到View3D内
		        this._view3D.addChild3D(cube);
		
		
		        ///创建面片,放置于场景内(0,0,0)位置
		        ///创建一个默认的贴图材质球
		        var mat_Plane: egret3d.TextureMaterial = new egret3d.TextureMaterial();
		        //使用内置Plane数据构造出一个默认参数Plane
		        var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry();
		        //通过材质球和geometery数据创建一个mesh对象
		        var plane = new egret3d.Mesh(geometery_Plane, mat_Plane);
		        //将mesh节点添加到View3D内
		        this._view3D.addChild3D(plane);
		
		
		
		        console.log("Hello World,Hello Egret3D");
		    }
		
		
		}

	3)控制相机运动,这里我们书写一个简单相机移动控制器。
		a) 示例代码:

			class Main extends egret.DisplayObject {
			
			
			    // Canvas操作对象
			    protected _egret3DCanvas: egret3d.Egret3DCanvas;
			    // View3D操作对象
			    protected _view3D: egret3d.View3D;
			    // 当前的相机对象
			    protected _camera: egret3d.Camera3D;
			    // 当前按键状态
			    protected _key: number;
			
			    public constructor() {
			        super();
			        //创建Canvas对象。
			        this._egret3DCanvas = new egret3d.Egret3DCanvas();
			        //Canvas的起始坐标,页面左上角为起始坐标(0,0)。
			        this._egret3DCanvas.x = 0;
			        this._egret3DCanvas.y = 0;
			        //设置Canvas页面尺寸。
			        this._egret3DCanvas.width = window.innerWidth;
			        this._egret3DCanvas.height = window.innerHeight;
			
			        //创建View3D对象,页面左上角为起始坐标(0,0)
			        this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight);
			        //当前对象对视位置,其参数依次为:
			        //@param pos 对象的位置
			        //@param target 目标的位置
			        this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 500, 500), new egret3d.Vector3D(0, 0, 0));
			        //View3D的背景色设置
			        this._view3D.backColor = 0xffffff;
			        //将View3D添加进Canvas中
			        this._egret3DCanvas.addView3D(this._view3D);
			        //初始化当前相机
			        this._camera = this._view3D.camera3D;
			
			
			        //启动_egret3DCanvas
			        this._egret3DCanvas.start();
			
			
			        //创建立方体,放置于场景内(0,0,0)位置
			        //创建一个默认的贴图材质球
			        var mat_cube: egret3d.TextureMaterial = new egret3d.TextureMaterial();
			        //使用内置cube数据构造出一个默认参数cube
			        var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry();
			        //通过材质球和geometery数据创建一个mesh对象
			        var cube = new egret3d.Mesh(geometery_Cube, mat_cube);
			        //将mesh节点添加到View3D内
			        this._view3D.addChild3D(cube);
			
			
			        ///创建面片,放置于场景内(0,0,0)位置
			        ///创建一个默认的贴图材质球
			        var mat_Plane: egret3d.TextureMaterial = new egret3d.TextureMaterial();
			        //使用内置Plane数据构造出一个默认参数Plane
			        var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry();
			        //通过材质球和geometery数据创建一个mesh对象
			        var plane = new egret3d.Mesh(geometery_Plane, mat_Plane);
			        //将mesh节点添加到View3D内
			        this._view3D.addChild3D(plane);
			
			        ///设置默认值-1
			        this._key = -1;
			
			        ///注册事件,持有对象为_egret3DCanvas,每帧触发该注册方法,需要依次写入事件标识符,注册方法和注册对象。
			        this._egret3DCanvas.addEventListener(egret3d.Event3D.ENTER_FRAME, this.OnUpdate, this);
			        ///注册鼠标按下事件
			        egret3d.Input.addEventListener(egret3d.KeyEvent3D.KEY_DOWN, this.OnKeyDown, this);
			        ///注册鼠标回弹事件
			        egret3d.Input.addEventListener(egret3d.KeyEvent3D.KEY_UP, this.OnKeyUp, this);
			
			
			        console.log("Hello World,Hello Egret3D");
			
			    }
			    //鼠标回弹事件
			    public OnKeyUp(e: egret3d.KeyEvent3D) {
			        //重置按键信息
			        this._key = -1;
			    }
			    //鼠标按下事件
			    public OnKeyDown(e: egret3d.KeyEvent3D) {
			        //记录按键信息
			        this._key = e.keyCode;
			    }
			
			    ///注册后,该事件将每帧响应
			    public OnUpdate(e: egret3d.Event3D) {
			        if (!this._camera || this._key == -1) {
			            return;
			        }
			        //qw控制上下 wasd控制前后左右
			        switch (this._key) {
			            case egret3d.KeyCode.Key_Q:
			                this._camera.y += 1;
			                break;
			            case egret3d.KeyCode.Key_E:
			                this._camera.y += -1;
			                break;
			            case egret3d.KeyCode.Key_W:
			                this._camera.z += -1;
			
			                break;
			            case egret3d.KeyCode.Key_S:
			                this._camera.z += 1;
			                break;
			            case egret3d.KeyCode.Key_A:
			                this._camera.x += 1;
			                break;
			            case egret3d.KeyCode.Key_D:
			
			                this._camera.x += -1;
			                break;
			        }
			
			    }
			}

	3)添加灯光。这里我们添加一个红色灯光来看下效果。
		a) 示例代码:

		class Main extends egret.DisplayObject {
		
		
		    // Canvas操作对象
		    protected _egret3DCanvas: egret3d.Egret3DCanvas;
		    // View3D操作对象
		    protected _view3D: egret3d.View3D;
		    // 当前的相机对象
		    protected _camera: egret3d.Camera3D;
		    // 当前按键状态
		    protected _key: number;
		
		    public constructor() {
		        super();
		        //创建Canvas对象。
		        this._egret3DCanvas = new egret3d.Egret3DCanvas();
		        //Canvas的起始坐标,页面左上角为起始坐标(0,0)。
		        this._egret3DCanvas.x = 0;
		        this._egret3DCanvas.y = 0;
		        //设置Canvas页面尺寸。
		        this._egret3DCanvas.width = window.innerWidth;
		        this._egret3DCanvas.height = window.innerHeight;
		
		        //创建View3D对象,页面左上角为起始坐标(0,0)
		        this._view3D = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight);
		        //当前对象对视位置,其参数依次为:
		        //@param pos 对象的位置
		        //@param target 目标的位置
		        this._view3D.camera3D.lookAt(new egret3d.Vector3D(0, 500, 500), new egret3d.Vector3D(0, 0, 0));
		        //View3D的背景色设置
		        this._view3D.backColor = 0xffffff;
		        //将View3D添加进Canvas中
		        this._egret3DCanvas.addView3D(this._view3D);
		        //初始化当前相机
		        this._camera = this._view3D.camera3D;
		
		
		        //启动_egret3DCanvas
		        this._egret3DCanvas.start();
		
		
		        //创建立方体,放置于场景内(0,0,0)位置
		        //创建一个默认的贴图材质球
		        var mat_cube: egret3d.TextureMaterial = new egret3d.TextureMaterial();
		        //使用内置cube数据构造出一个默认参数cube
		        var geometery_Cube: egret3d.CubeGeometry = new egret3d.CubeGeometry();
		        //通过材质球和geometery数据创建一个mesh对象
		        var cube = new egret3d.Mesh(geometery_Cube, mat_cube);
		        //将mesh节点添加到View3D内
		        this._view3D.addChild3D(cube);
		
		
		        ///创建面片,放置于场景内(0,0,0)位置
		        ///创建一个默认的贴图材质球
		        var mat_Plane: egret3d.TextureMaterial = new egret3d.TextureMaterial();
		        //使用内置Plane数据构造出一个默认参数Plane
		        var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry();
		        //通过材质球和geometery数据创建一个mesh对象
		        var plane = new egret3d.Mesh(geometery_Plane, mat_Plane);
		        //将mesh节点添加到View3D内
		        this._view3D.addChild3D(plane);
		
		        ///设置默认值-1
		        this._key = -1;
		
		        ///注册事件,持有对象为_egret3DCanvas,每帧触发该注册方法,需要依次写入事件标识符,注册方法和注册对象。
		        this._egret3DCanvas.addEventListener(egret3d.Event3D.ENTER_FRAME, this.OnUpdate, this);
		        ///注册鼠标按下事件
		        egret3d.Input.addEventListener(egret3d.KeyEvent3D.KEY_DOWN, this.OnKeyDown, this);
		        ///注册鼠标回弹事件
		        egret3d.Input.addEventListener(egret3d.KeyEvent3D.KEY_UP, this.OnKeyUp, this);
		
		
		
		        
		    	///创建一个灯光组,该灯光组将管理场景内的灯光资源
		        var lights: egret3d.LightGroup = new egret3d.LightGroup();
		        ///创建一个方向光对象,其中参数(-0.5, -0.6, 0.2)为方向向量,为灯光方向,默认方向为0, 0, 1)。
		        var dirLight: egret3d.DirectLight = new egret3d.DirectLight(new egret3d.Vector3D(-0.5, -0.6, 0.2));
		        ///灯光漫反射颜色是红色,默认为白色
		        dirLight.diffuse = 0xff0000;
		        ///写入组
		        lights.addLight(dirLight);
		        ///设置灯效组。
		        cube.material.lightGroup = lights;
		        plane.material.lightGroup = lights;
		
		        console.log("Hello World,Hello Egret3D");
		
		    }
		    //鼠标回弹事件
		    public OnKeyUp(e: egret3d.KeyEvent3D) {
		        //重置按键信息
		        this._key = -1;
		    }
		    //鼠标按下事件
		    public OnKeyDown(e: egret3d.KeyEvent3D) {
		        //记录按键信息
		        this._key = e.keyCode;
		    }
		
		    ///注册后,该事件将每帧响应
		    public OnUpdate(e: egret3d.Event3D) {
		        if (!this._camera || this._key == -1) {
		            return;
		        }
		        //qw控制上下 wasd控制前后左右
		        switch (this._key) {
		            case egret3d.KeyCode.Key_Q:
		                this._camera.y += 1;
		                break;
		            case egret3d.KeyCode.Key_E:
		                this._camera.y += -1;
		                break;
		            case egret3d.KeyCode.Key_W:
		                this._camera.z += -1;
		
		                break;
		            case egret3d.KeyCode.Key_S:
		                this._camera.z += 1;
		                break;
		            case egret3d.KeyCode.Key_A:
		                this._camera.x += 1;
		                break;
		            case egret3d.KeyCode.Key_D:
		
		                this._camera.x += -1;
		                break;
		        }
		
		    }
		}