unity 原型_使用Unity和React快速进行原型制作

unity 原型

Web applications are great way to quickly reach a lot of users without the hassle of native client installs and play store downloads. Web frameworks such as React allow page components to communicate and respond to user interaction much like traditional applications. Being web-focused, React also offers exceptionally strong support for adaptive and responsive layout, e.g. smoothly re-flowing the page content for a vertically-oriented mobile device or browser window.

Web应用程序是快速吸引大量用户的好方法，而无需麻烦地进行本机客户端安装和播放商店下载。 像React这样的Web框架允许页面组件像传统应用程序一样进行通信并响应用户交互。 以网络为中心，React还为自适应和响应式布局提供了异常强大的支持，例如，平滑地重排页面内容以用于垂直定向的移动设备或浏览器窗口。

However, applications with complex UI and internal state — like a 3D game or simulation — are largely out of scope for React. Instead, such tasks are the domain of game engines like Unity3D. Unity can export WebGL applications which run self-contained game worlds with 3D rendering, physics interactions, and so on. Unity WebGL can also, in principle, communicate with the browser via jslib plug in and react-unity-webgl.

但是，具有复杂UI和内部状态的应用程序(例如3D游戏或模拟)在很大程度上超出了React的范围。 相反，此类任务是Unity3D等游戏引擎的领域。 Unity可以导出通过3D渲染，物理交互等运行独立的游戏世界的WebGL应用程序。 原则上，Unity WebGL还可以通过jslib插件和react-unity-webgl与浏览器进行通信。

In theory, then, we can get the best of both worlds for rich interactive web applications by implementing one or more complex worlds in Unity WebGL, then allowing them to communicate with each other via the browser.

从理论上讲，通过在Unity WebGL中实现一个或多个复杂世界，然后允许它们通过浏览器相互通信，我们可以充分利用丰富的交互式Web应用程序的两个世界。

Unity和React示例项目 (Unity and React Example Project)

Using this technique, we were able to implement a Machine Vision training simulator composed of three distinct panels — two have unique Unity3D WebGL instances — in a React-based page. Each page has two way communication between the instances of Unity and React’s front end.

使用这种技术，我们能够在基于React的页面中实现一个机器视觉训练模拟器，该模拟器由三个不同的面板组成-两个面板具有唯一的Unity3D WebGL实例。 每个页面在Unity和React的前端实例之间都有两种通信方式。

Panel #1 displays an assembly line with 3D assets coming down a conveyer belt. Panel #2 handles dataset generation by letting users take snapshots of parts that had been incorrectly classified as they came down the belt. Panel #3 allows players to define ML classes and populate them with snapshots from #2 (a form of Transfer Learning), in order to train the Machine Vision model to better classify parts coming down the belt. The results of this model training are visible in Panel #1, as parts in the next batch are classified under the retrained model.

＃1面板显示一条装配线，其中3D资产从传送