EgretPro——从入门到入坑

2021-06-08 17:29:35 阅读：995 来源： 互联网

标签：egret 场景入门项目 EgretPro 2D 到入 pro 3D

工作需求要做简单的3D开发，由于一直在用egret2D引擎做开发，自然想到使用egret的3D引擎快速完成任务。egret的3D引擎也就是Egret Pro，官网说是集成2D和3D的可视化开发引擎，使用之后才发现，这他喵的根本就是忽悠人，最后发布运行还是要导入到2D工程里。而且不用不知道，一用全是坑！为了避免后来人跟我一样掉入各种坑里，觉得还是应该记录一下。话不多说，接下来就开始踩坑之旅吧！

一、创建3D库项目

在开始踩坑之前，请确保自己的egret engine版本是5.3.7+，egret pro版本是1.6.0+，因为其他版本的坑可能你这辈子都踩不完。我这里使用的egret engine和egret pro版本分别是5.3.8和1.6.0。

首先，我们打开egret pro并创建一个库项目：

为什么是库项目？因为示例项目就是给初学者演示效果用的，里面有很多的示例3D场景，就是让大家感受3D效果的。库项目，顾名思义，就是作为一个库导入到其他项目中使用的。我们写好库项目，就能把他导入到2D工程里，然后添加UI啥的，一起运行显示。

创建完库项目会自动打开，结果第一步就出现了下面的错误：

这是什么玩意？什么task...queues？进程被拒绝？是不是因为项目开多了？原来是我正在运行着一个egret的3D项目，这玩意竟然一次只能加载一个3D项目。我把正在运行的3D项目停止运行之后，果然不报错了。

然后我就按照官方的教程写了个简单的组件（component），就是在场景里新建一个立方体，然后键盘左右键可以控制立方体左右移动。具体实现，大家可以参考文末的链接。

在编写3D脚本时，引用包时，我这里代码自动引入的都是绝对路径：

而教程里是“@egret”加包名。经过实测，发现我的代码自动引入绝对路径是不好用的，需要手动改成“@egret”加包名：

至于怎么自动引入正确，目前我还不知道，如果有知道的小伙伴，麻烦告知一下~

二、将3D库项目导入到2D项目中

按照egret官方的教程，首先我们需要创建一个2D工程，这里需要注意，如果使用engine5.3.8直接创建2D工程，后续会发现有各种奇葩的问题，为了解决这个问题，只需要使用低版本的引擎（我使用的是5.2.28，其他版本只要不是太低，估计都好用）创建2D工程，然后升级项目引擎版本为5.3.8（修改egretProperties.json里的引擎版本号）就可以了，而且没有任何奇怪的问题。官方视频里使用的是5.3.7，我没有试，感兴趣的小伙伴可以自行测试是否好用。创建好2D项目，我们需要把3D库项目拷贝到我们的2D项目的根目录下：

然后用VS Code打开2D项目，并修改2D项目的index.html里如下位置（别忘了修改template/web下的index.html）：

接下来在2D工程的Main.ts里onButtonClick方法里编写以下代码实现调用3D场景的功能：

//egret 3D
const texture = await egret.pro.createTextureFrom3dScene("assets/scenes/animations/running.scene.json", 640, 640);
const bitmap = new egret.Bitmap(texture);
this.addChild(bitmap);

其中“running.scene.json”就是我在3D工程里创建的场景文件：

然后我们还需要通过以下命令生成2D工程可以引用的库文件：

在终端cd到3D工程根目录下：

cd pro-library

生成库文件：

npm run build:library

如果执行成功，则会在3D工程跟目下生成以下文件：

生成之后，我们需要配置 egretProperties.json，在最后添加：

{
  "name": "pro-library",
  "path": "./pro-library/pro-library"
}

然后cd到2D工程根目录下：

cd ..

运行2D工程：

egret run -a

如果此时，你的3D项目在egret pro里不是处于运行状态，运行2D工程之后，点击“Click！”按钮，你会发现什么3D场景都没出现。通过浏览器检查Console会发现，原来是加载不到3D场景文件：

egret官方给出的解决方法是直接拷贝3D项目下的场景资源到2D项目的resource里。即将下图路径下的资源：

拷贝到2D项目resource下：

拷贝过去之后再运行项目，果然出现了3D场景！

三、2D与3D之间的交互

然后就是2D与3D之间的交互，这么重要的功能，egret官方竟然没有给出清晰的文档说明，我也是真无语了！看了大部分egret的视频教程，我才找到相应的方法：

2D抛出事件给3D:

egret.pro.dispatch("2dTouchMove", 1, 5);

3D监听2D抛出的事件：

Application.instance.egretProUtil.addEventListener("2dTouchBegin", 1, this.touchBeginFrom2D, this);

3D抛出事件给2D:

Application.instance.egretProUtil.dispatch("msgFrom3D",1, "msg");

2D监听3D抛出的事件：

egret.pro.addEventListener("msgFrom3D", 1, this.showMsg, this);

具体的参数说明可以参考API文档或者引擎源码。

四、发布项目、真机测试

模拟器测试成功之后，发布到移动端效果是不是也正常呢？先发布看看吧，执行egret publis发布项目，果不其然，egret在挖坑方面真的是无出其右啊：

还好，官方视频也给了解决方式：将pro-library.js拷贝出来一份，并重命名为pro-library.min.js。

再次发布，果然成功了！

然后打包测试下吧。打包运行，发现又加载不到3D场景文件了。。。Oh My God！有完没完啊！真的就是一步一个坑啊！

还好，官方视频也给了解决方式——拜托，有这功夫，你们不能直接做好，不用修改吗？

解决方式就是把3D项目下，egretpro.json里的localhost改成自己电脑的本地ip，并且你的手机必须跟电脑在同一局域网内，而且你的电脑还必须运行着3D场景！注意，每次修改了3D项目里的内容之后，都要重新生成库文件（千万别忘了，pro-library.min.js要重新拷贝出来）

好吧，你赢了~一顿操作，重新发布打包运行之后，你会发现，手机上终于看到3D场景了！至此，我们看似踩完了egret pro从创建工程到发布打包的所有坑，但你以为就这么容易吗？

五、其他坑

由于需求，我们想让3D场景的背景为透明的，经过本人测试（egret engine:5.3.8，egret pro:1.6.0），通过设置3D场景里的主摄像机（Main Camera）的背景为全透明，可以达到目的。经测试，只有将主摄像机的背景设置为纯黑色，透明度为0，这样在浏览器里运行的效果才是透明背景（只显示3D组件）。但是如果发布到手机运行时，背景就变成了纯黑色，也就是透明度为0这个属性不好用了，目前不知道是什么鬼。如果有知道设置3D场景背景为透明的好方法，还希望小伙伴们告知一下~

另外，经测试，我发现可以将egretpro.json里的“http://localhost:3000/”直接删掉，然后通过浏览器访问服务器上发布出来的项目（即访问发布出来的index.html），是可以独立成功运行，也就是不需要运行着3D场景项目就能成功加载到3D场景文件，而且3D场景背景可以为透明的。这样我们至少可以通过手机浏览器访问发布出来的项目。

项目源码：https://download.csdn.net/download/jiuyuefenglove/19477597

参考：https://docs.egret.com/egretpro/video

标签：egret,场景,入门,项目,EgretPro,2D,到入,pro,3D
来源： https://blog.csdn.net/jiuyuefenglove/article/details/117695587