如何利用Egret Pro在2D项目中添加3D内容

·概述

EgretPro是白鹭引擎于2019年开发的2D/3D可视化编辑器。

如果您希望在现有项目中添加3D内容，可以将EgretPro项目导出为一个白鹭第三方库，然后在Egret项目中通过导入外部库的方式进行使用。

使用方式

步骤一：创建EgretPro项目

1、下载并安装EgretPro1.6或者更高版本；

2、打开EgretPro,选择新建->库项目，如果新建项目类型中没有库项目，请确认创建项目面板中的引擎版本号为1.6.0或更高版本；

3、点击浏览按钮，选择一个Egret项目根路径。确认后将项目路径处的新项目名称NewProject修改为pro-library；

4、点击创建按钮，创建成功后，您的项目结构应如下所示：

|--root

|--resource

|--libs

|--src

|--pro-library

|--resource

|--src

|--egretpro.json

|--egretProperties.json

步骤二：将EgretPro项目导出为第三方库

通过VSCode打开刚刚创建好的项目在项目根目录执行。

npminstall

npmrunbuild:library

即可将当前项目打包成一个js库，位置是pro-library

步骤三：将生成的pro-library导入Egret项目

修改2d项目egretProperties.json中的modules,添加该模块。

{

"modules":[

//.....

{

"name":"pro-library",

"path":"./pro-library/pro-library"//指向EgretPro库项目的pro-library文件夹

}

]

}

修改后需要通过执行编译命令，在manifest.json中看到pro-library.js引入即为成功。

步骤四：升级2D项目

2d项目为了可以和EgretPro第三方库兼容，需要进行升级引擎至5.3.7版本，开发者可以通过EgretLauncher下载最新版本。

下载引擎后，修改index.html,后如下所示：

egret.runEgret({

renderMode:"webgl",

audioType:,

calculateCanvasScaleFactor:function(context){

varbackingStore=context.backingStorePixelRatio||

context.webkitBackingStorePixelRatio||

context.mozBackingStorePixelRatio||

context.msBackingStorePixelRatio||

context.oBackingStorePixelRatio||

context.backingStorePixelRatio||1;

return(window.devicePixelRatio||1)/backingStore;

},

pro:true,//需要修改为true,以启动EgretPro环境

});

步骤五：在Egret项目中添加EgretPro内容

目前可以将EgretPro中的场景渲染为一个egret.Texture对象，Egret引擎只需要将egret.Texture添加到Bitmap对象当中，即可渲染到舞台。

consttexture=awaitegret.pro.createTextureFrom3dScene("assets/scenes/animations/test.scene.json",640,640);

constbitmap=newegret.Bitmap(texture);

this.addChild(bitmap);

编译运行即可。

如何在EgretPro和Egret项目之间进行交互

EgretPro与2d引擎间提供了几个方法用于函数调用以及通讯。EgretPro项目与Egret2d项目都可通过egret.pro进行调用。

declarenamespaceegret.pro{

/**

*执行方法

*通过传入命令的字符串，获取已注册的方法并执行，参数为可变参数

*执行方法可获取到方法的返回值

*若找到注册该方法，会报出警告并返回null

*@paramcommand

*@paramthisObject

*@paramargs

*/

exportfunctionexecute(command:string,...args:any[]):any;

/**

*注册方法

*根据传入字符串名称，注册方法

*同一个名称的方法只能注册一次，相同名称会报出警告

*@paramcommand

*@paramfunc

*@paramthisObject

*/

exportfunctionregister(command:string,func:(...args:any[])=>any,thisObject:any):void;

/**

*注册事件

*@parameventType

*@paramtarget

*@paramfunc

*@paramthisObject

*/

exportfunctionaddEventListener(eventType:string,target:any,func:(...args:any[])=>void,thisObject:any):void;

/**

*移除事件

*@parameventType

*@paramtarget

*@paramfunc

*/

exportfunctionremoveEventListener(eventType:string,target:any,func:(...args:any[])=>void):void;

/**

*派发事件

*@paramcommand

*@paramtarget

*@paramargs

*/

exportfunctiondispatch(command:string,target:any,...args:any[]):void;

}

新功能在使用期间如果有任何问题，可以直接与白鹭引擎官方助手（微信号：egretengine）、白鹭引擎公众号联系或在Egret论坛留言，感谢各位开发者的支持。