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

2021-06-09 10.31.54

2 Likes

many thanks! It is really helpful