React Native and THREE.js (WebGL library) integration

Question

I'm working on a project where we are using React Web and React Native. I already implemented a React Web component which allows you to load 3D models from OBJ, MTL and image files, once the model is loaded you can edit it, attach 3D labels on it and stuff, and finally save your edited 3D model back into the server, and my implementation uses THREE.js behind the scenes.

Now, the next step is to be able to retrieve these files from the server and render the edited 3D Model within a React Native app (mobile). So my question is: how should I go about doing this? I was thinking of using some embedded web view for react native so that I could reuse as much code as possible from the React Web component, and then somehow implement some sort of communication between the web view and the native app but I'm not very sure about how to actually implement this.

I've done some research so far and what I found is the following:

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

By reading those pages I got a sense that what I want to do might be doable but I am still not really sure about how to actually implement this. How do I make the React Web component live inside a Webview, and then how do I make the injected code interact with the inner workings of my web component inside the WebView?

If my intended approach turns out not being feasible, is there any alternative approaches to render a 3D model natively in a React Native app, hopefully with a high level of abstraction comparable to that of THREE.js (some sort of THREE-like library for React Native)?

Maybe, a react-native-three component which uses some native components will be helpful to the community. — vijayst, Aug 07 '16 at 09:08
@BAR React Native is for creating mobile app. The performance is really native compared with Cordova, Ionic, etc :) — Pewh Gosh, Sep 09 '16 at 03:20

score 4 · Answer 1 · answered Jul 09 '17 at 20:23

4

Expo, the framework in which an app is created via create-react-native-app has a GLView which provides access native OpenGL.

There's a tutorial for using Three.js in expo.

answered Jul 09 '17 at 20:23

Greg M.

421
6
10

score 3 · Answer 2 · edited May 23 '17 at 11:55

It's not proper for you to use webview to render complex contents, such as 3D models, it not well support among devices.

Though I've not write some react native app, but I've write an android app. In the App, I tryed to use webview to render the stlloader demo of three.js projects, but with no success. And I also found mobile can render some simple 3D scene, here the webview render ability is lower than the mobile browser. Finally I use crosswalk an web engine which can added to the app. I use XWalkView of crosswalk to replace webview to render the 3D models. Here is the answer of mine about the process.

To use crosswalk in react native app, reference this:

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

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

Hope it helps.

score -1 · Answer 3 · edited Dec 28 '18 at 16:25

I implemented Three.js Module in HTML file. HTML file is responsible for rendering 3D Model [Here is the link to understand the same].

Now you can use react-native-wkwebview-reborn to load the html page on your device.

<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 to React-Native

To post anything from your HTML file to react-native you need to postMessage().

From your HTML

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

window.webkit.messageHandlers.reactNative.postMessage() calls onMessage={this.onMessage} of react-native-wkwebview-reborn method.

To React-Native

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

React-Native to HTML

From your React-Native

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

In your HTML

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

React Native and THREE.js (WebGL library) integration

3 Answers3

Linked