I used this sandbox to create my own 3D model of the Earth and add some markers to geolocation coords. Now I want to create curved lines to connect some markers, sort of flight track style. By looking at the drei documentation, I thought maybe I should use a CatmulRomLine, so I created this CurvedLine component:
import React, { useRef } from 'react';
import { CatmullRomLine } from '@react-three/drei';
export interface CurvedLineProps {
start: [number, number, number];
end: [number, number, number];
}
export const CurvedLine = ({ start, end }: CurvedLineProps) => {
const lineRef = useRef(null);
return (
<CatmullRomLine
ref={lineRef}
points={[start, end]}
closed={false}
color={0xffe600}
lineWidth={6}
curveType='catmullrom'
tension={0.03}
/>
);
};
And in my App.tsx I used it like that:
import { CurvedLine} from './components/CurvedLine';
const getLinePoint = (item): [number, number, number] => {
return [item.lat as number, item.lon as number, 0];
};
// ...rest of the code
<Suspense fallback={null}>
<CurvedLine
start={getLinePoint(coords[0])}
end={getLinePoint(coords[3])}
/>
<Earth coords={coords} />
</Suspense>
Though it draw some line, but it's nowhere near the Earth, and it's not curved. Basically that's what it looks like:
I thought maybe I shouldn't use the hard-coded 0, removed it - same result.
What am I doing wrong? How can I draw a curved line that connects 2 points?