web-dev-qa-db-fra.com

Intégration de React Native et THREE.js (bibliothèque WebGL)

Je travaille sur un projet dans lequel nous utilisons React Web et React Native. J'ai déjà implémenté un composant Web React qui vous permet de charger des modèles 3D à partir de fichiers OBJ, MTL et d'images. Une fois le modèle chargé, vous pouvez le modifier, y apposer des étiquettes 3D, etc., puis enregistrer votre modèle 3D modifié dans le serveur, et mon implémentation utilise THREE.js dans les coulisses.

L'étape suivante consiste à extraire ces fichiers du serveur et à restituer le modèle 3D modifié dans une application React Native (mobile). Ma question est donc la suivante: comment dois-je m'y prendre? Je pensais utiliser une vue Web intégrée pour réagir en natif afin de pouvoir réutiliser le plus de code possible du composant Web React, puis mettre en place une sorte de communication entre la vue Web et l'application native, mais je ne suis pas très satisfait sûr de la façon de réellement mettre en œuvre cela.

J'ai fait des recherches jusqu'à présent et voici ce que j'ai trouvé:

Native WebView for React et Un pont entre la visualisation Web et l'application native

En lisant ces pages, j'ai eu le sentiment que ce que je voulais faire pouvait être faisable, mais je ne suis toujours pas vraiment sûr de la manière de réellement mettre cela en œuvre. Comment faire vivre le composant Web React dans une vue Web, puis comment faire interagir le code injecté avec le fonctionnement interne de mon composant Web dans la Vue Web?

Si mon approche envisagée s'avère impossible, existe-t-il une autre solution pour restituer un modèle 3D de manière native dans une application React Native, avec un niveau d'abstraction élevé comparable à celui de THREE.js (une sorte de bibliothèque semblable à THREE) Réagir natif)?

webview3dthree.jsreact-nativewebgl
13
Pablo Messina

Il ne convient pas que vous utilisiez WebView pour restituer des contenus complexes, tels que des modèles 3D, car la prise en charge entre appareils est insuffisante.

Bien que je n’aie pas écrit d’application native native, mais que j’ai écrit une application Android. Dans l’application, j’ai essayé d’utiliser WebView pour rendre la démonstration stlloader de projets three.js, mais sans succès. Et j’ai aussi découvert que le mobile pouvait rendre une scène 3D simple, ici la capacité de rendu de la visualisation Web est inférieure à celle du navigateur pour mobile. Enfin, j'utilise crosswalk un moteur Web pouvant être ajouté à l'application. J'utilise XWalkView of Crosswalk pour remplacer WebView afin de rendre les modèles 3D. Voici la réponse de la mienne sur le processus.

Pour utiliser le passage pour piétons dans l’application native native, faites référence à ceci:

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

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

J'espère que ça aide.

3
Kris Roofe

Expo , le cadre dans lequel une application est créée via create-react-native-app possède un GLView qui fournit un accès natif à OpenGL.

Il y a un tutoriel pour utiliser Three.js dans expo .

3
Greg M.

J'ai implémenté le module Three.js dans un fichier HTML. Fichier HTML est responsable du rendu 3D Model [Voici le lien pour comprendre le même] .

Vous pouvez maintenant utiliser react-native-wkwebview-reborn pour charger la page html sur votre appareil.

<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 pour réagir-natif

Pour poster quoi que ce soit de votre fichier HTML pour réagir en natif, vous devez postMessage ().

À partir de votre HTML 

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

window.webkit.messageHandlers.reactNative.postMessage() appelle onMessage={this.onMessage} de la méthode react-native-wkwebview-reborn.

Réagir natif 

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

React-Native au HTML

De votre React-Native 

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

Dans votre HTML 

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