How to draw an arc on a Sphere using Lat/Long instead of 3D Coordinates, Three.js -

here have simple function draws line on 2 points in latitude , longitude on 3d sphere acting earth. draw line arc , on sphere have setup , not above it.i'm using lat/lon start , end points. have 2 points latitude , longitude passed variables well. using three.js project.

addspline(37.778, -122.452); addspline(51.517, 0.119); function addspline(lat,lng) {     var origin_phi = (90-37.778) * math.pi / 180;     var origin_theta = (360+122.452) * math.pi / 180;     var origin_x = radius * math.sin(origin_phi) * math.cos(origin_theta);     var origin_y = radius * math.cos(origin_phi);     var origin_z = radius * math.sin(origin_phi) * math.sin(origin_theta);      var target_phi = (90-lat) * math.pi / 180;     var target_theta = (360-lng) * math.pi / 180;     var target_x = radius * math.sin(target_phi) * math.cos(target_theta);     var target_y = radius * math.cos(target_phi);     var target_z = radius * math.sin(target_phi) * math.sin(target_theta);      var mid_phi = origin_phi + ( origin_phi - target_phi )/2;     var mid_theta = origin_theta + ( origin_theta-target_theta ) / 2;     var mid_x = radius * math.sin(mid_phi) * math.cos(mid_theta);     var mid_y = radius * math.cos(mid_phi);     var mid_z = radius * math.sin(mid_phi) * math.sin(mid_theta);      var splinegeometry = new three.geometry();      var points = [];     points.push(new three.vector3( origin_x, origin_y, origin_z )); //    points.push(new three.vector3( mid_x, mid_y, mid_z ));     points.push(new three.vector3( target_x, target_y, target_z ));      var spline = new three.splinecurve3( points );    var i;     (i = 0; < points.length; i++)     {         var position = spline.getpoint( );         splinegeometry.vertices[ ] = new three.vector3( position.x, position.y, position.z );     }      var color = new three.color( 0xffffff );      var material = new three.linebasicmaterial( { color: 0x00fff00, opacity: 1, linewidth: 1 } );     var line = new three.line( splinegeometry,  material );     earth.add( line ); } 

example here: https://corexsystems.net/projects/threejs/earthandmoon/

i found perfect example. here go interested!!!

/*     three.js "tutorials example"     author: lee stemkoski  */  // main  // standard global variables var container, scene, camera, renderer, controls, stats;  init(); animate();  // functions         function init()  {     // scene     scene = new three.scene();     // camera     var screen_width = window.innerwidth, screen_height = window.innerheight;     var view_angle = 45, aspect = screen_width / screen_height, near = 0.1, far = 20000;     camera = new three.perspectivecamera( view_angle, aspect, near, far);     scene.add(camera);     camera.position.set(0,150,400);     camera.lookat(scene.position);       // renderer     if ( detector.webgl )         renderer = new three.webglrenderer( {antialias:true} );     else         renderer = new three.canvasrenderer();      renderer.setsize(screen_width, screen_height);     container = document.createelement( 'div' );     document.body.appendchild( container );     container.appendchild( renderer.domelement );     // events     threex.windowresize(renderer, camera);     threex.fullscreen.bindkey({ charcode : 'm'.charcodeat(0) });     // controls     controls = new three.trackballcontrols( camera, renderer.domelement );     // stats     stats = new stats();     stats.domelement.style.position = 'absolute';     stats.domelement.style.bottom = '0px';     stats.domelement.style.zindex = 100;     container.appendchild( stats.domelement );     // light     var light = new three.pointlight(0xffffff);     light.position.set(0,250,0);     scene.add(light);       ////////////     // custom //     ////////////      var spheregeo = new three.spheregeometry(100, 64, 32);      // create earth nice texture      var colors = three.imageutils.loadtexture( "images/earth-day.jpg" );      var earthmaterial = new three.meshbasicmaterial( { color: 0xffffff, map: colors } );      this.earthsphere = new three.mesh( spheregeo, earthmaterial );      scene.add(earthsphere);       renderer.autoclear = false;     renderer.setclearcolor(0x000000, 0.0);      addmarker(20, -160, 0xff0000); // near hawaii      addmarker(40.7, -73.6, 0x0000ff); // garden city, ny     var gcny = convertlatlontovec3(40.7, -73.6).multiplyscalar(100.5);     addmarker(30,-90, 0x00ff00); // new orleans, la     var nola = convertlatlontovec3(30,-90).multiplyscalar(100.5);      drawcurve( createspherearc(gcny,nola), 0x00ffff ); }  function addmarker(lat, lon, colory) {     var radius = 100;     var marker = new three.mesh( new three.spheregeometry(1, 8, 4), new three.meshbasicmaterial({color:colory}) );     marker.position = convertlatlontovec3(lat,lon).multiplyscalar(radius);     scene.add(marker) }   function convertlatlontovec3(lat,lon) {     lat =  lat * math.pi / 180.0;     lon = -lon * math.pi / 180.0;     return new three.vector3(          math.cos(lat) * math.cos(lon),          math.sin(lat),          math.cos(lat) * math.sin(lon) ); }  function greatcirclefunction(p, q) {     var angle = p.angleto(q);     return function(t)     {         var x = new three.vector3().addvectors(             p.clone().multiplyscalar(math.sin( (1 - t) * angle )),              q.clone().multiplyscalar(math.sin(      t  * angle )))             .dividescalar( math.sin(angle) );         return x;     }; }  function createspherearc(p,q) {     var spherearc = new three.curve();     spherearc.getpoint = greatcirclefunction(p,q);     return spherearc; }  function drawcurve(curve, color) {     var linegeometry = new three.geometry();     linegeometry.vertices = curve.getpoints(100);     linegeometry.computelinedistances();     var linematerial = new three.linebasicmaterial();     linematerial.color = (typeof(color) === "undefined") ? new three.color(0xff0000) : new three.color(color);     var line = new three.line( linegeometry, linematerial );     scene.add(line); }  function animate()  {     requestanimationframe( animate );     render();            update(); }  function update() {     controls.update();     stats.update(); }  function render()  {     renderer.clear();     renderer.render(scene, camera); }