在three.js中繪製曲線從vector3到vector3在SphereGeometry的表面上

Question

我創建了一個球體，並且正在接收兩個向量。我只需要在球體表面繪製一條線來連接點。

我覺得這個問題與大圈密切相關，但我不知道如何去執行它。 https://en.wikipedia.org/wiki/Great-circle_distance

我注意到，如果xStart + xEnd> 0，那麼xOffset是正數（y和z相同）。這使曲線彎曲到全球短路。我的問題是曲線不坐在地球上，並且弧的高度根據兩點而改變。我意識到偏移不能只是線性的，但我不知道該怎麼做。

任何幫助將不勝感激。

var sphere = new THREE.SphereGeometry(200, 100, 100); 
 

 
//Skipping unrelated code and to include creating sphere mesh and adding it to the scene 
 

 
var curve = new THREE.QuadraticBezierCurve3(
 
\t new THREE.Vector3(xStart, yStart, zStart), 
 
    new THREE.Vector3((xStart+xEnd)/2 + xOffset, (yStart+yEnd)/2 + yOffset, (zStart+zEnd)/2 + zOffset), //Midpoint with offset 
 
\t new THREE.Vector3(xEnd, yEnd, zEnd) 
 
); 
 

 
var geometry = new THREE.Geometry(); 
 
geometry.vertices = curve.getPoints(50); 
 

 
var line = new THREE.Line(geometry, materialLine); 
 
globe.scene.add(line);

Answer 1

我希望以後不要重新發明自行車。基於this SO answer的答案

想象一下，你的兩個向量和球體的中心是三角形的頂點。

當我們有一個三角形，我們可以發現它是正常的。這個法線將是我們的軸，我們將簡單地圍繞它旋轉我們的第一個向量。

function setArc3D(pointStart, pointEnd, smoothness, color, clockWise) { 
    // calculate a normal (taken from Geometry().computeFaceNormals()) 
    var cb = new THREE.Vector3(), ab = new THREE.Vector3(), normal = new THREE.Vector3(); 
    cb.subVectors(new THREE.Vector3(), pointEnd); 
    ab.subVectors(pointStart, pointEnd); 
    cb.cross(ab); 
    normal.copy(cb).normalize(); 


    var angle = pointStart.angleTo(pointEnd); // get the angle between vectors 
    if (clockWise) angle = angle - Math.PI * 2; // if clockWise is true, then we'll go the longest path 
    var angleDelta = angle/(smoothness - 1); // increment 

    var geometry = new THREE.Geometry(); 
    for (var i = 0; i < smoothness; i++) { 
    geometry.vertices.push(pointStart.clone().applyAxisAngle(normal, angleDelta * i)) // this is the key operation 
    } 

    var arc = new THREE.Line(geometry, new THREE.LineBasicMaterial({ 
    color: color 
    })); 
    return arc; 
} 

jsfiddle例子。