web-dev-qa-db-ja.com

ReactネイティブとTHREE.js（WebGLライブラリ）の統合

React WebとReact Nativeを使用しています。React Web OBJ、MTL、および画像ファイルから3Dモデルをロードできるコンポーネント。モデルがロードされると、モデルを編集し、3Dラベルを添付して、最後に編集した3Dモデルをサーバーに保存して、実装で使用できます。裏でTHREE.js。

次のステップは、これらのファイルをサーバーから取得し、編集した3DモデルをReactネイティブアプリ（モバイル）内でレンダリングできるようにすることです。したがって、私の質問は、どうすればよいですか。 React Webコンポーネントから可能な限り多くのコードを再利用し、どういうわけか、 Webビューとネイティブアプリですが、実際にこれを実装する方法についてはよくわかりません。

私はこれまでにいくつかの調査を行いましたが、私が見つけたのは次のとおりです。

ReactのネイティブWebView および Webviewとネイティブアプリ間のブリッジ

それらのページを読むことで、自分のやりたいことが実行可能かもしれないと感じましたが、実際にこれを実装する方法についてはまだよくわかりません。 React WebコンポーネントをWebview内でライブにするにはどうすればよいですか。次に、注入されたコードをWebView内のWebコンポーネントの内部動作とどのように相互作用させるのですか？

私の意図したアプローチが実現不可能であることが判明した場合、3DモデルをReactネイティブアプリでネイティブにレンダリングするための代替アプローチはありますか。できれば、THREE.jsに匹敵する高レベルの抽象化が必要です。 （React Native）のTHREEに似たライブラリのようなものですか？

webview3dthree.jsreact-nativewebgl
14
Pablo Messina

3Dモデルなどの複雑なコンテンツをレンダリングするためにwebviewを使用することは適切ではありません。デバイス間のサポートは十分ではありません。

私はいくつかの反応ネイティブアプリを記述していませんが、Androidアプリを記述しています。アプリでは、webviewを使用してthree.jsプロジェクトのstlloaderデモをレンダリングしようとしましたが、モバイルもいくつかのシンプルな3Dシーンをレンダリングできることがわかりました。ここでは、webviewのレンダリング能力がモバイルブラウザーよりも低くなっています。最後に、アプリに追加できるWebエンジンであるcrosswalkを使用します。webviewの代わりにcrosswalkのXWalkViewを使用しています3Dモデルをレンダリングするには、次のようにします answer 私のプロセスについて。

反応ネイティブアプリで横断歩道を使用するには、これを参照してください。

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

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

それが役に立てば幸い。

3
Kris Roofe

Expo 、create-react-native-appを介してアプリが作成されるフレームワークには、ネイティブOpenGLへのアクセスを提供する GLView があります。

expoでThree.jsを使用するためのチュートリアル があります。

3
Greg M.

Three.jsモジュールをHTMLファイルに実装しました。 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}
/>
_

React-NativeへのHTML

HTMLファイルからリアクションネイティブに何かを投稿するには、postMessage（）を実行する必要があります。

HTMLから

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

window.webkit.messageHandlers.reactNative.postMessage()は_onMessage={this.onMessage}_メソッドの_react-native-wkwebview-reborn_を呼び出します。

To React-Native

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

React-Native to 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);
 })
_
0
Ashok R