Animate a mesh across a sphere's surface

Summary

function calcPathPoints({ start, end, center = new THREE.Vector3(...config.meshes.sphere.position), radius = config.meshes.sphere.radius, segments = 64}) { const points = []; const startLocal = start.clone().sub(center); const endLocal = end.clone().sub(center); const startNorm = startLocal.normalize(); const endNorm = endLocal.normalize(); const quaternion = new THREE.Quaternion().setFromUnitVectors( startNorm, endNorm ); for (let i = 0; i <= segments; i++) { const t = i / segments; const stepQuat = new THREE.Quaternion().slerpQuaternions( new THREE.Quaternion(), quaternion, t ); const pointLocal = startNorm .clone() .applyQuaternion(stepQuat) .multiplyScalar(radius); const pointWorld = pointLocal.add(center); points.push(pointWorld); } return points;} function createPath({ start, end }) { const { width, color } = config.meshes.path; const points = calcPathPoints({ start, end }); const mesh = new Line2( new LineGeometry().setFromPoints(points), new LineMaterial({ color, linewidth: width, resolution: new THREE.Vector2( config.viewport.width, config.viewport.height ), dashed: false }) ); mesh.computeLineDistances(); return mesh;}