React本机和THREE.js (WebGL库)集成

Question

我正在做一个我们使用React Web和React Native的项目。我已经实现了一个React Web组件，它允许你从OBJ，MTL和图像文件加载3D模型，一旦模型加载，你可以编辑它，在它上面附加3D标签和东西，最后将编辑后的3D模型保存回服务器，我的实现在幕后使用THREE.js。

现在，下一步是能够从服务器检索这些文件，并在React Native应用程序(移动设备)中渲染编辑后的3D模型。所以我的问题是:我应该怎么做呢？我正在考虑为react native使用一些嵌入式web视图，这样我就可以重用React Web组件中尽可能多的代码，然后以某种方式实现web视图和本地应用程序之间的某种通信，但我不太确定如何实际实现这一点。

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

Native WebView for React和A bridge between webview and native app

通过阅读这些页面，我感觉到我想要做的事情可能是可行的，但我仍然不确定如何真正实现这一点。如何让React Web组件存在于Webview中，然后如何使注入的代码与WebView中web组件的内部工作方式交互？

如果我想要的方法被证明是不可行的，有没有其他方法可以在React Native应用程序中原生地呈现3D模型，希望它具有与THREE.js (某种类似于React Native的三类库)相当的高抽象级别？

Answer 1

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

有一个tutorial for using Three.js in expo。

Answer 2

你不适合使用webview来渲染复杂的内容，比如3D模型，它不能很好地支持设备间的交互。

虽然我还没有编写一些react原生应用程序，但我已经编写了一个android应用程序。在应用程序中，我尝试使用webview来呈现three.js项目的stlloader演示，但没有成功。我还发现移动端可以渲染一些简单的3D场景，这里的webview渲染能力低于移动端浏览器。最后，我使用了crosswalk，这是一个可以添加到应用程序中的web引擎。我使用crosswalk的XWalkView来代替webview来渲染3D模型。这是我关于这个过程的answer。

要在react原生应用程序中使用crosswalk，请参考以下内容：

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

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

希望能有所帮助。

Answer 3

我在HTML文件中实现了Three.js模块。HTML文件负责渲染3D模型 [Here is the link to understand the same]。

现在，您可以使用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}
/>

React的

超文本标记语言-本机

要将任何内容从HTML文件发布到react-native，您需要使用postMessage()。

超文本标记语言中的

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

window.webkit.messageHandlers.reactNative.postMessage()调用react-native-wkwebview-reborn方法的onMessage={this.onMessage}。

到React的-本机

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

HTML

原生语言

来自React-Native的

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

超文本标记语言中的

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