javascript - three.js 中在 SphereGeometry 的表面上从 vector3 到 vector3 绘制曲线

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(
	new THREE.Vector3(xStart, yStart, zStart),
  new THREE.Vector3((xStart+xEnd)/2 + xOffset, (yStart+yEnd)/2 + yOffset, (zStart+zEnd)/2 + zOffset), //Midpoint with offset
	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

假设您的两个向量和球体的中心是三 Angular 形的顶点。

当我们有一个三 Angular 形时，我们可以发现它是正常的。该法线将成为我们的轴，我们将简单地围绕它旋转我们的第一个向量。

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示例。