# Animate path between two points on globe threejs

Hi, I am trying to learn everything that can be related to visualization on the globe. I created functions that put a point on the globe depending on latitude and longitude and connect them with a curve. I would like that curve to have a draw animation but I don’t know how to do it. Like here, but without globe.gl library
Github Globe Clone using Three.js | Three.js Portfolio Website - YouTube.

``````const geometryObject = new THREE.SphereGeometry(0.015, 32, 16);
const materialObject = new THREE.MeshBasicMaterial({ color: 0xff0000 });

function placeObjectOnPlanet(name, lat, lon, radius) {
const object = new THREE.Mesh(geometryObject, materialObject);

object.name = name;
var latRad = lat * (Math.PI / 180);
var lonRad = -lon * (Math.PI / 180);
object.position.set(
);
//console.log("x je : " + Math.cos(latRad) * Math.cos(lonRad) * radius);
//console.log("y je : " + Math.sin(latRad) * radius);
//console.log("z je : " + Math.cos(latRad) * Math.sin(lonRad) * radius);

object.rotation.set(0.0, -lonRad, latRad - Math.PI * 0.5);

}

let xyz = new THREE.Vector3();

var latRad = lat * (Math.PI / 180);
var lonRad = -lon * (Math.PI / 180);
xyz.set(
);
return xyz;
}

function makeCurve(name1, lat1, lon1, name2, lat2, lon2) {
/* Load object */
'./obj/plane.glb',
function(gltf) {

gltf.scene.position.x = 0;
gltf.scene.position.y = 1.2;
gltf.scene.position.z = 0;
gltf.scene.scale.set(0.1, 0.1, 0.1);
gltf.scene.frustumCulled = true;

globe = gltf.scene;

},
function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function(error) {

console.log('An error happened');
}
);

let x, y, z;

let points = [];

let v1 = new THREE.Vector3();
let v2 = new THREE.Vector3();

for (let i = 0; i <= 20; i++) {
let p = new THREE.Vector3().lerpVectors(v1, v2, i / 20);
p.normalize();
p.multiplyScalar(1 + 0.1 * Math.sin(Math.PI * i / 20));
points.push(p);
}

let path = new THREE.CatmullRomCurve3(points);

const geometryCurve = new THREE.TubeGeometry(path, 40, 0.003, 8, false);
const materialCurve = new THREE.MeshBasicMaterial({ color: 0xff0000 });
//const materialCurve = materialShader;
const line = new THREE.Mesh(geometryCurve, materialCurve);

}
``````

Hi!
Maybe this topic will be helpful: Global Impacts (waves + trails)

Hi, looks so cool! I will check

I made this function for drawing and i like it

``````function animateLineDrawing(lineMain, delay){
let nEnd = 0;
let nMax;
let nStep = 5;
let geometry = lineMain.geometry;
nMax = geometry.attributes.position.count*6;
let lineTo = {val: nEnd};
new TWEEN.Tween(lineTo)
.to({val: nMax}, 1000)
.delay(1000 * delay)
.onStart(()=>{
})
.onUpdate(()=>{
lineMain.geometry.setDrawRange( 0, lineTo.val );
renderer.render(scene, camera);
})
.onComplete(()=>{
if(delay == 1){

}
animateLineUndrawing(lineMain, nMax, 0.5, name);
})

.start();
}
``````

But i do not know how to make function for undrawing, i love your animation. My now works spot p1 to spot p2, for undrawing go again in spot p1. I do not like that, I want undrawing like yours.

``````function animateLineUndrawing(lineMain, maxUn, delay, name){
let nEnd = maxUn;
let nMax;
let nStep = 5;
let geometry = lineMain.geometry;
nMax = 0;
let lineTo = {val: nEnd};
new TWEEN.Tween(lineTo)
.to({val: nMax}, 1000)
.delay(1500 * delay)
.onStart(()=>{