React Native和THREE.js(WebGL库)集成

Question

我正在开发一个使用React Web和React Native的项目.我已经实现了一个阵营的Web组件,它允许您从OBJ,MTL和图像文件加载3D模型,一旦模型被加载,你可以编辑它,它和东西连接3D标签,最后保存修改后的3D模型回服务器,我的实现在幕后使用THREE.js.

现在,下一步是能够从服务器检索这些文件,并在React Native应用程序(移动)中呈现已编辑的3D模型.所以我的问题是:我该怎么做呢？我正在考虑使用一些嵌入式Web视图作为本机反应,以便我可以从React Web组件中重用尽可能多的代码,然后以某种方式实现Web视图和本机应用程序之间的某种通信,但我不是很确定如何实际实现这一点.

到目前为止我做了一些研究,我发现如下:

本机WebView for React和webview与本机应用程序之间的桥梁

通过阅读这些页面,我意识到我想做的事情可能是可行的,但我仍然不确定如何实际实现这一点.如何在Webview中生成React Web组件,然后如何使注入的代码与WebView内部Web组件的内部工作交互？

如果我的目的的做法证明不可行,有没有渲染的3D模型的任何替代方法本身的阵营原生应用,希望有媲美three.js所(某种三样库的一个高度抽象的React Native)？

Answer 1

Expo，通过 create-react-native-app 创建应用程序的框架有一个GLView，它提供访问原生 OpenGL。

有一个在 expo 中使用 Three.js的教程。

Answer 2

不适合使用webview来渲染复杂的内容，例如3D模型，它在设备之间的支持不好。

虽然我没有写过一些 React Native 应用程序，但我写了一个 Android 应用程序。在App中，我尝试使用webview渲染三个.js项目的stlloader演示，但没有成功。而且我还发现移动设备可以渲染一些简单的3D场景，这里webview的渲染能力低于移动浏览器。最后，我使用 crosswalk 一个可以添加到应用程序中的网络引擎。我使用人行横道的XWalkView代替webview来渲染3D模型。这是我关于这个过程的回答。

要在 React Native 应用程序中使用 Crosswalk，请参考以下内容：

https://github.com/iwater/react-native-crosswalk-android

https://github.com/jordansexton/react-native-webview-crosswalk

希望能帮助到你。