0

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:

Drawn line above Earth

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?

Igal
  • 5,833
  • 20
  • 74
  • 132

0 Answers0