How to use Globe.gl React component in React Native?

I asked a similar request in the Git Repo as well here, .

I have an app that uses the react component exported by this project. It depends on three.js and WebGL to work. It is an extension of this repo by the same author, .

I made a beautiful web app with these libraries and all works as expected, on the web, but I want to extend this to a mobile app built on react native as well.

I have tried a simple port but get an error from the CSS2DRenderer trying to access the document object which clearly doesn't exist on a mobile app.

I tried using expo GLView here, but could not for the life me figure out where to start on the context creation function to be able to port the three globe to it.

My question is, based on the Repo's I have shared above, what is the best approach to implementing the Globe in React Native?

I would also take any alternatives that I could do drag/zoom Globe with dynamic plot points and interactive functions (click basically).

For a quick setup to recreate the project, I am working an out of the box react native application setup

npm i react-globe.gl

Pop below component inside of a View in the app.js and import the Globe from above library. Provide an empty array for hexBinPointsData

 <Globe globeImageUrl="//" bumpImageUrl="//" backgroundImageUrl="//" hexBinPointsData={plotData} hexAltitude={0.1} hexBinResolution={4} hexBinMerge={false} /> 

Expected error: Document variable cannot be found. In the CSS2DRenderer.js file.

Any help would be appreciated!

2

Related questions 4 Google Map Javascript API in react-native 14 React Native and THREE.js (WebGL library) integration 10 How to make three.js run in React Native (without WebView)? Related questions 4 Google Map Javascript API in react-native 14 React Native and THREE.js (WebGL library) integration 10 How to make three.js run in React Native (without WebView)? 1 Rendering open gl es view in react native 2 Use google map API in a react babel component 2 How to see a Google map in 3D mode? 1 How to achieve this effect using gl-react-native? 0 getting an error when using geolib in react native 1 Rotate Globe.gl globe (with react-three-fiber or otherwise) in React 0 How to render a 3D object using GLView in Expo? Load 7 more related questions Show fewer related questions

Reset to default

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

You Might Also Like