 # Drawing curve on a globe

Hello everybody! Didn’t find any proper information. I’ve already read this.

Could you please help me to understand what am I doing wrong?

I’ve got a sphere with countries on it. Each of the country got it’s center dot. On country hover I’m drawing a curve, but this curve not always good. It’s angle is sometimes wrong. Also 2 mid dots not always make the curve smooth. And it is sometimes goes throughout the globe instead of go above it.

So to draw curve I get 2 dot’s. Start and end. Here is the algorithm of how I get them:

``````computeCenterPoint = (mesh) => {
const geometry = mesh.geometry;
geometry.computeBoundingBox();
const center = new Vector3();
geometry.boundingBox.getCenter(center);
mesh.localToWorld(center);
mesh.centerPoint = center
return mesh.centerPoint
}
``````

Then I past it to curve draw function. Here is the way of how I compute mid dots:
Sphere radius is 3.1

``````        const start = new Vector3(startX, startY, startZ)
const end = new Vector3(endX, endY, endZ)

const altitude = clamp(start.distanceTo(end) * .75, 0.1, 6);

const mid1 = this.interpolatePoints(startX, startY, altitude + startZ, .75);
const mid2 = this.extrapolatePoints(endX, endY, altitude + endZ, .75);
``````

Do you know that? From the Collection of examples from discourse.threejs.org

2021 eXtended eXamples 2 Likes

many thanks! It is really helpful