webview - React Native e integrazione THREE.js(libreria WebGL)




react native webview (2)

Sto lavorando a un progetto in cui utilizziamo React Web e React Native. Ho già implementato un componente Web React che consente di caricare modelli 3D da OBJ, MTL e file immagine, una volta caricato il modello è possibile modificarlo, applicare etichette 3D su di esso e cose e infine salvare il modello 3D modificato nel server, e la mia implementazione utilizza THREE.js dietro le quinte.

Ora, il passo successivo è quello di essere in grado di recuperare questi file dal server e rendere il modello 3D modificato all'interno di un'app React Native (mobile). Quindi la mia domanda è: come dovrei fare questo? Stavo pensando di usare una vista web incorporata per reagire in modo nativo in modo da poter riutilizzare il maggior numero possibile di codice dal componente Web React e quindi implementare in qualche modo una sorta di comunicazione tra la visualizzazione Web e l'app nativa, ma non sono molto sicuro su come implementarlo.

Ho fatto alcune ricerche finora e quello che ho trovato è il seguente:

Native WebView per React e Un bridge tra webview e app nativa

Leggendo queste pagine ho la sensazione che ciò che voglio fare sia fattibile, ma non sono ancora molto sicuro su come implementarlo. Come faccio a far vivere il componente React Web all'interno di una Webview e come faccio a far interagire il codice iniettato con il funzionamento interno del mio componente Web all'interno di WebView?

Se il mio approccio previsto risulta non fattibile, ci sono approcci alternativi per rendere un modello 3D in modo nativo in un'app React Native, si spera con un alto livello di astrazione paragonabile a quello di THREE.js (una sorta di libreria tipo THREE per Reagire nativo)?


Non è corretto per te usare la webview per il rendering di contenuti complessi, come i modelli 3D, non è un buon supporto tra i dispositivi.

Anche se non ho scritto alcune app native, ho scritto un'app per Android. In App, ho provato a usare webview per rendere la demo di stlloader dei progetti three.js, ma senza successo. E ho anche trovato che il mobile può rendere alcune semplici scene 3D, qui l'abilità di render webview è inferiore a quella del browser mobile. Finalmente utilizzo crosswalk di un motore Web che può essere aggiunto all'app. Io uso XWalkView del crosswalk per sostituire la webview per il rendering dei modelli 3D. Ecco la mia risposta sul processo.

Per utilizzare il crosswalk in risposta all'app nativa, fai riferimento a questo:

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

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

Spero che sia d'aiuto.