添加 3D 内容

添加 3D 内容概述​Egret Pro 是白鹭引擎于 2019 年开发的 2D/3D 可视化编辑器。

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

使用方式​步骤一：创建 EgretPro 项目​下载并安装 EgretPro 1.6 或者更高版本打开EgretPro,选择 新建 -> 库项目，如果新建项目类型中没有库项目，请确认创建项目面板中的引擎版本号为 1.6.0 或更高版本。点击浏览按钮，选择一个 Egret 项目根路径。确认后将项目路径处的新项目名称 NewProject 修改为pro-library点击创建按钮，创建成功后，您的项目结构应如下所示|-- root |-- resource |-- libs |-- src |-- pro-library |-- resource |-- src |-- egretpro.json |-- egretProperties.json步骤二：将 EgretPro 项目导出为第三方库​通过VS Code 打开刚刚创建好的项目 在项目根目录执行

npm installnpm run build: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 版本，开发者可以通过 Egret Launcher 下载最新版本。

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

egret.runEgret({ renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor: function (context) { const backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; }, // 需要修改为true,以启动 EgretPro 环境 pro: true,});步骤五：在Egret 项目中添加 EgretPro 内容​目前可以将 EgretPro 中的场景渲染为一个egret.Texture对象，Egret引擎只需要将egret.Texture添加到Bitmap对象当中，即可渲染到舞台。

const width = 512;const height = 512;const sceneUrl = "assets/scenes/animations/test.scene.json";const texture = await egret.pro.createTextureFrom3dScene(sceneUrl, width * 2, height * 2);const bitmap = new egret.Bitmap(texture);bitmap.width = width;bitmap.height = height;this.addChild(bitmap);编译运行即可

如何在 EgretPro 和 Egret项目之间进行交互​EgretPro 与2d引擎间提供了几个方法用于函数调用以及通讯。EgretPro项目与Egret2d项目都可通过 egret.pro 进行调用。

declare namespace egret.pro { /* * 执行方法 * 通过传入命令的字符串，获取已注册的方法并执行，参数为可变参数 * 执行方法可获取到方法的返回值 * 若找到注册该方法，会报出警告并返回 null * @param command * @param thisObject * @param args */ export function execute(command: string, ...args: any[]): any; /* * 注册方法 * 根据传入字符串名称，注册方法 * 同一个名称的方法只能注册一次，相同名称会报出警告 * @param command * @param func * @param thisObject */ export function register(command: string, func: (...args: any[]) => any, thisObject: any): void; /* * 注册事件 * @param eventType * @param target * @param func * @param thisObject */ export function addEventListener(eventType: string, target: any, func: (...args: any[]) => void, thisObject: any): void; /* * 移除事件 * @param eventType * @param target * @param func */ export function removeEventListener(eventType: string, target: any, func: (...args: any[]) => void): void; /* * 派发事件 * @param command * @param target * @param args */ export function dispatch(command: string, target: any, ...args: any[]): void;}