React Native 和 THREE.js（WebGL 库）的集成

Question

我正在处理一个项目，我们正在使用React Web和React Native。我已经实现了一个React Web组件，可以从OBJ、MTL和图像文件加载3D模型，一旦加载了模型，您就可以对其进行编辑，在其上附加3D标签等，最后将您编辑的3D模型保存回服务器，并且我的实现在幕后使用THREE.js。

现在，下一步是能够从服务器检索这些文件并在React Native应用程序（移动设备）中呈现编辑后的3D模型。那么我的问题是：我应该如何做到这一点？我考虑使用一些嵌入式Web视图来实现React Native，以便尽可能多地重用React Web组件中的代码，然后以某种方式在Web视图和本地应用程序之间实现某种通信，但我不太确定如何实际实现这一点。

到目前为止，我已经进行了一些研究，我发现以下内容：

React Native的本机WebView和Webview和本机应用程序之间的桥梁

通过阅读这些页面，我得到了一个感觉，我想做的事情可能是可行的，但我仍然不太确定如何实际实现这一点。我如何让React Web组件活在Webview中，然后如何使注入的代码与Webview内部的我的Web组件的内部工作进行交互？

如果我的预期方法不可行，是否有任何替代方法可以在React Native应用程序中本地呈现3D模型，希望具有与THREE.js相当的高度抽象（类似于React Native的某种类似THREE的库）？

- Pablo Messina

---

也许，一个使用一些本地组件的react-native-three组件将对社区有所帮助。 - vijayst

为什么需要React Native？ - BAR

@vijayst，你能给我提供react-native-three的链接吗？ - Pewh Gosh

@BAR React Native用于创建移动应用程序。与Cordova、Ionic等相比，其性能确实更为本地化：) - Pewh Gosh

Answer 1

"

Expo是一个通过create-react-native-app创建应用程序的框架，其中包含GLView，可提供对本地OpenGL的访问。

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

"

- Greg M.

Answer 2

不建议使用webview来渲染复杂内容，例如3D模型等，因为它在设备中的支持程度不够好。

虽然我没有编写过一些React Native应用程序，但我写过一个Android应用程序。 在该应用程序中，我尝试使用Webview来呈现three.js项目的stlloader演示，但并未成功。 我还发现移动设备可以呈现一些简单的3D场景，其中webview的渲染能力低于移动浏览器。最后，我使用了crosswalk作为添加到应用程序的web引擎。 我使用crosswalk的XWalkView替换了webview以呈现3D模型。这是我的答案。

要在React Native应用程序中使用crosswalk，请参阅：

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

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

希望能对您有所帮助。

- LF00

Answer 3

我在HTML文件中实现了Three.js模块。HTML文件负责渲染3D模型 [这里是理解相同内容的链接]。

现在，您可以使用react-native-wkwebview-reborn在设备上加载HTML页面。

<WKWebView
    ref={(wbref) => {
      this.webview = wbref;
    }}
    source={{uri: 'http://localhost:8080/index.html'}}
    onLoadStart={this.onLoadStart}
    onLoad={this.onLoad}
    onLoadEnd={this.onLoadEnd}
    onError={this.onError}
    renderError={this.renderError}
    onMessage={this.onMessage}
    scalesPageToFit
    bounces={false}
    scrollEnabled={false}
/>

HTML 转 React-Native 要将 HTML 文件中的任何内容发布到 React-Native，您需要使用 postMessage()。

从您的 HTML 中：

window.webkit.messageHandlers.reactNative.postMessage(JSON.stringify({key: "sendMessageToReactNative"}));

window.webkit.messageHandlers.reactNative.postMessage() 调用了 onMessage={this.onMessage} 方法，该方法属于 react-native-wkwebview-reborn。

给 React-Native 的说明

 onMessage = (e) => {
    const message = JSON.parse(e.nativeEvent.data);
    console.log(message);
  };

React-Native 转 HTML

来自你的 React-Native

//on some action like button click and etc..
this.webview.postMessage(JSON.stringify({key: "sendMessageToHTML"}));

在你的HTML中

 document.addEventListener('message', function(e) {
     let message = JSON.parse(e.data);
     console.log(message);
 })

- Ashok R