Интеграция React Native и THREE.js(библиотека WebGL)

Я работаю над проектом, в котором мы используем React Web и React Native. Я уже реализовал компонент React Web, который позволяет загружать 3D-модели из OBJ, MTL и файлов изображений, как только модель загружена, вы можете ее редактировать, прикреплять к ней 3D-метки и т.д. И, наконец, сохранить отредактированную трехмерную модель обратно в сервер, а моя реализация использует THREE.js за кулисами.

Теперь следующий шаг - получить эти файлы с сервера и отобразить отредактированную 3D-модель в приложении React Native (мобильное устройство). Поэтому мой вопрос: как мне это сделать? Я думал об использовании встроенного веб-представления для реагирования на native, чтобы я мог повторно использовать как можно больше кода из веб-компонента React Web, а затем каким-то образом реализовать какую-то связь между веб-представлением и родным приложением, но я не очень конечно, о том, как реально реализовать это.

До сих пор я провел некоторое исследование, и я нашел следующее:

Встроенный WebView for React и Мост между веб-просмотром и родным приложением

Читая эти страницы, я понял, что то, что я хочу сделать, может быть выполнимым, но я все еще не совсем уверен, как это реализовать. Как сделать веб-компонент React Live внутри веб-представления, а затем как заставить внедренный код взаимодействовать с внутренней работой моего веб-компонента внутри WebView?

Если мой намеченный подход окажется невозможным, есть ли альтернативные подходы к рендерингу 3D-модели из приложения React Native, надеюсь, с высоким уровнем абстракции, сопоставимым с уровнем THREE.js(что-то вроде THREE- как библиотека для React Native)?

Ответ 1

Неправильно для вас использовать webview для визуализации сложного содержимого, такого как 3D-модели, он не очень хорошо поддерживается среди устройств.

Хотя я не писал какое-то реагирование на собственное приложение, но я написал приложение для Android. В приложении я попытался использовать webview для демонстрации демонстрации stlloader проектов three.js, но без успеха. И я также обнаружил, что мобильный может отображать простую 3D-сцену, здесь способность визуализации веб-браузера ниже, чем мобильный браузер. Наконец, я использую crosswalk веб-движок, который можно добавить в приложение. Я использую XWalkView для пешеходного перехода, чтобы заменить webview, чтобы отобразить 3D-модели. Ниже представлен ответ о процессе.

Чтобы использовать переход в интерактивном приложении, обратитесь к этому:

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

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

Надеюсь, что это поможет.