添加 3D 内容

概述

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

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

使用方式

步骤一：创建 EgretPro 项目

  1. 下载并安装 EgretPro 1.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 项目导出为第三方库

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

npm install
npm 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;
}