React Native 和 THREE.js(WebGL 库)集成 [英] React Native and THREE.js (WebGL library) integration

问题描述

我正在开发一个使用 React Web 和 React Native 的项目.我已经实现了一个 React Web 组件，它允许您从 OBJ、MTL 和图像文件加载 3D 模型，加载模型后，您可以对其进行编辑，在其上附加 3D 标签等等，最后将编辑过的 3D 模型保存回服务器，而我的实现在幕后使用了 THREE.js.

I'm working on a project where we are using React Web and React Native. I already implemented a React Web component which allows you to load 3D models from OBJ, MTL and image files, once the model is loaded you can edit it, attach 3D labels on it and stuff, and finally save your edited 3D model back into the server, and my implementation uses THREE.js behind the scenes.

现在，下一步是能够从服务器检索这些文件并在 React Native 应用程序(移动)中渲染编辑后的 ​​3D 模型.所以我的问题是:我应该怎么做?我正在考虑为 React Native 使用一些嵌入式 Web 视图，以便我可以重用来自 React Web 组件的尽可能多的代码，然后以某种方式实现 Web 视图和本机应用程序之间的某种通信，但我不是很确定如何实际实现这一点.

Now, the next step is to be able to retrieve these files from the server and render the edited 3D Model within a React Native app (mobile). So my question is: how should I go about doing this? I was thinking of using some embedded web view for react native so that I could reuse as much code as possible from the React Web component, and then somehow implement some sort of communication between the web view and the native app but I'm not very sure about how to actually implement this.

到目前为止，我已经做了一些研究，发现如下:

I've done some research so far and what I found is the following:

用于 React 的本机 WebView 和 webview 和原生应用之间的桥梁

通过阅读这些页面，我感觉到我想做的事情可能是可行的，但我仍然不确定如何实际实施.如何让 React Web 组件存在于 Webview 中，然后如何使注入的代码与 WebView 中的 Web 组件的内部工作交互?

By reading those pages I got a sense that what I want to do might be doable but I am still not really sure about how to actually implement this. How do I make the React Web component live inside a Webview, and then how do I make the injected code interact with the inner workings of my web component inside the WebView?

如果我的预期方法不可行，是否有任何替代方法可以在 React Native 应用程序中本地渲染 3D 模型，希望具有与 THREE.js(某种三种-像 React Native 的库)?

If my intended approach turns out not being feasible, is there any alternative approaches to render a 3D model natively in a React Native app, hopefully with a high level of abstraction comparable to that of THREE.js (some sort of THREE-like library for React Native)?

推荐答案

Expo，应用程序所在的框架通过 create-react-native-app 创建的有一个 GLView 提供访问原生 OpenGL.

Expo, the framework in which an app is created via create-react-native-app has a GLView which provides access native OpenGL.

有一个 教程，用于在 expo 中使用 Three.js.

这篇关于React Native 和 THREE.js(WebGL 库)集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！