https://react-3d-route-earth.netlify.app/

If running locally: In the project directory, you can run:

npm i

npm start

You can find a complete example at pages/main.jsx

Component Docs:

Space

<Space content={__OTHER_COMPONENTS__}></Space> Space component contains <pointLight/> & <Starts/> as the default scene. If you wish to display other components in the 'Space', you need to pass them as 1 component as content. To pass in as 1 component, you can wrap it with <React.Fragment>

Earth

<Earth isEnter={isEnter} content={__OTHER_COMPONENTS__}></Earth> A 3d earth spins by default. If you wish to display other components on the surface of the 'Earth', you need to pass them as 1 component as content. To pass in as 1 component, you can wrap it with <React.Fragment>

MapDot

<MapDot dot={__POINT__}></MapDot> A red dot to place on the surface of the <Earth>. __POINT__ can be generated by the function geoToXYZ() by passing in a location object that looks like: {lat: //latitude, LNG: //longtitude}

TextPole

<TextPole dot={__POINT__} text={__TEXT__} rotate={0.1} mouseEnterEvent={(e) => setEnter(true)} mouseLeaveEvent={(e) => setEnter(false)} mouseDownEvent={(e) => {__YOUR_EVENT__}}></TextPole> A grey pole that will go through the given dot with the given __TEXT__ displaying at the end of the pole. Pass in custom mouse events as needed.

MovingPath

<MovingPath from={beijing_xyz} to={berlin_xyz} frameTime={time}></MovingPath> A route starts from from to to. time is a state that you should create on the level where you create <Earth/> and pass in here. }