Draw line between two lng/lat

[pianosnake]

I have the following code for adding a line

function createLine(start, end) {
  const geometry = new THREE.Geometry();
  geometry.vertices.push(threebox.projectToWorld(start), threebox.projectToWorld(end));
  return new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff0000 }));
 }

// the function is called from inside the `map.addLayer` `onAdd` event
const line1 = createLine(origin, [-100, 40]); 
threebox.world.add(line1);

The line draws in the proper place, but when I pan or zoom it jumps around and looks very jittery.

addAtCoordinate() does not work for features that are already in lng/lat coordinates so that's why i'm adding directly to the world group.

Is there a better way to do this?

[peterqliu]

great question @pianosnake -- you've run into fundamental precision issues of float32 numbers -- we can create geometry that is very precise (no jitter), or very large in extent (spanning large parts of the world), but not both. You can try splitting up the geometry into smaller pieces to reduce the extents, and translating each line.position into place.

hope that helps!

[pianosnake]

Thank you. Splitting the line into small equal segments and drawing a point for each one worked for my purpose.