Реагировать на Native и THREE.js (библиотека WebGL)
Я работаю над проектом, в котором мы используем React Web и React Native. Я уже реализовал компонент React Web, который позволяет загружать 3D-модели из OBJ, MTL и файлов изображений. После загрузки модели вы можете отредактировать ее, прикрепить к ней 3D-метки и т. Д. И, наконец, сохранить отредактированную 3D-модель обратно в сервер, и моя реализация использует THREE.js за кулисами.
Теперь следующим шагом будет возможность извлечь эти файлы с сервера и отобразить отредактированную 3D-модель в приложении React Native (для мобильных устройств). Итак, мой вопрос: как мне это сделать? Я думал об использовании некоторого встроенного веб-представления для собственного реагирования, чтобы я мог повторно использовать как можно больше кода из веб-компонента React, а затем каким-то образом реализовать какую-то связь между веб-представлением и собственным приложением, но я не очень уверен в том, как на самом деле реализовать это.
Я провел некоторое исследование, и обнаружил следующее:
Собственный WebView для React и мост между веб-представлением и собственным приложением
Читая эти страницы, я почувствовал, что то, что я хочу сделать, может быть выполнимо, но я все еще не совсем уверен в том, как на самом деле реализовать это. Как сделать так, чтобы веб-компонент React работал в веб-представлении, и как заставить внедренный код взаимодействовать с внутренней работой моего веб-компонента в веб-представлении?
Если мой предполагаемый подход оказывается неосуществимым, есть ли альтернативные подходы для визуализации трехмерной модели в приложении React Native, надеюсь, с высоким уровнем абстракции, сравнимым с уровнем THREE.js (своего рода библиотека, подобная ТРИ для Реагируй родной)?
3 ответа
Неправильно использовать веб-представление для визуализации сложного содержимого, такого как 3D-модели, оно не очень хорошо поддерживается на устройствах.
Хотя я не пишу какое-то реагирующее нативное приложение, но я пишу приложение для Android. В приложении я пытался использовать webview для демонстрации демонстрации stlloader проектов three.js, но безуспешно. И я также обнаружил, что мобильный телефон может отображать простую 3D-сцену, здесь возможности веб-просмотра ниже, чем у мобильного браузера. Наконец, я использую веб-движок crosswalk, который может быть добавлен в приложение. Я использую XWalkView CrossWalk для замены веб-просмотра для визуализации 3D-моделей. Вот мой ответ о процессе.
Чтобы использовать crosswalk в приложении native native, используйте следующую ссылку:
https://github.com/iwater/react-native-crosswalk-android
https://github.com/jordansexton/react-native-webview-crosswalk
Надеюсь, поможет.
Я реализовал модуль Three.js в HTML-файле. HTML-файл отвечает за рендеринг 3D-модели [Вот ссылка, чтобы понять то же самое].
Теперь вы можете использовать response-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}
/>
HTML для React-Native
Чтобы публиковать что-либо из вашего HTML-файла в реагирующий-родной, вам нужно использовать postMessage().
Из вашего HTML
window.webkit.messageHandlers.reactNative.postMessage(JSON.stringify({key: "sendMessageToReactNative"}));
window.webkit.messageHandlers.reactNative.postMessage() звонки onMessage={this.onMessage} из react-native-wkwebview-reborn метод.
Реагировать-Родной
onMessage = (e) => {
const message = JSON.parse(e.nativeEvent.data);
console.log(message);
};
Реагировать на 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);
})