2023年3月1日

Evergine React模板介绍

Evergine，这款强大的工业级渲染引擎，刚刚发布了一个新的React模板，旨在简化Web端现代3D应用程序的开发。在本文中，我们将深入探讨如何使用这个新模板及其背后的架构。

切换

Evergine React入门

开始使用Evergine React模板非常简单。创建新项目时，请确保选择React SPA模板，提供项目名称和位置，即可开始！

使用Evergine React模板实现无缝协作

Evergine React模板的设计明确侧重于支持多个开发团队无缝协作。该模板遵循React标准，并包含一个新的Evergine NPM包，便于升级到引擎的未来版本，确保您的Web UI始终与最新的渲染技术保持同步。

使用Evergine React模板创建新项目后，负责3D渲染的团队可以开始使用与其他平台相同的工具和工作流程构建场景，例如

Evergine Studio。同样，React开发团队可以立即使用他们最熟悉的IDE和工具开始构建界面。完成后，团队可以启动SPA应用程序，查看嵌入在网站中的场景。

构建React与Evergine之间的交互

Evergine React模板的主要优势在于其能够支持多个开发团队无缝协作。这是通过一组API实现的，这些API允许开发人员在Web界面和3D渲染引擎之间共享数据。一个团队可以专注于构建Web界面，而另一个团队则负责构建3D内容。由于所有内容都构建在同一个Visual Studio解决方案中，因此很容易确保所有团队都遵循相同的标准并使用相同的工作流程。

数据以事件的形式共享，渲染的3D场景和界面在发生变化时（例如鼠标移动、3D元素之间的碰撞等）使用这些事件进行通信。事件有两种类型：源自Web（React）的事件和源自3D渲染（Evergine）的事件。其背后的技术工作原理如下：

当Web上发生需要传达给3D渲染的事件时（例如茶壶颜色的更改），React组件使用webEventsProxy通过WASM基础设施将事件从Web传达到Evergine。webEventsListener接收该事件，并将其传达给WebEventsService，该服务通过依赖注入容器在Evergine渲染器中可用。可以在应用程序的任何位置使用此服务来订阅其事件并执行所需的操作（例如，更改茶壶材质的颜色）。

通过这种方式工作，Web界面团队和3D团队只需约定事件的名称（例如“changeColor”）以及每个事件附带的数据（例如“#RGB”中的颜色代码）。然后，Web团队在Web界面和webEventsProxy上实现修改，3D团队在webEventsListener、webEventsService以及3D场景的其余部分实现修改。

当3D场景中发生需要传达给Web的事件时，例如茶壶的旋转角度，C#组件会通过AppEventsService触发一个事件。可以通过依赖注入容器访问此事件。appEventsProxy订阅此事件，并通过WASM基础设施将其传达给React中的appEventsListener。appEventsListener根据是标准Evergine事件还是自定义事件（EvergineStore或AppStore），将事件注册到相应的状态存储中。然后，任何React组件都可以使用相应的hook（useEvergineStore或useAppStore）订阅该事件，并采取相应行动。例如，组件可以使用useEffect hook将茶壶的旋转角度绘制到一个字段中。

在这种情况下，3D 团队负责在 AppEventsService、AppEventsProxy 和 Application 中实现修改。同时，Web 界面团队在 AppEventsListener 和 Web 端实现修改。

这些组件在 C# 侧的 WebReact 项目中可用，在 React/JavaScript 侧的 spa 项目中也可用。此外还有两个项目：一个是 Evergine 的 3D 应用程序项目，它对所有平台通用；另一个是 Host 项目，用于帮助在生产环境中部署应用程序，并管理文件压缩。

存储在 evergineStore 中的 Evergine 标准事件包括：

webAssemblyLoaded：当应用程序的所有程序集都已加载，且 WASM 基础设施准备就绪可供使用时，该值设为 true。初始值为 false。
evergineReady：当场景启动时设为 true，场景关闭时设为 false。初始值为 false。

有一个名为 evergine-react 的 NPM 包（https://www.npmjs.com/package/evergine-react），其中包含 EvergineStore 和通用 Store 的实现。createStore 和 useStore 函数用于创建 AppStore，该 Store 位于项目代码中，用于添加渲染器的自定义事件。该包还包含一个 EvergineCanvas 组件，用于在 Web 上绘制 3D 场景，以及 webEventsProxy 的部分实现，用于初始化 EvergineCanvas、销毁它并更新其尺寸。最后，它还实现了 Evergine 的初始化和事件通信的实用工具。未来将向该包添加新功能。