在SphereGeometry表面上从vector3到vector3绘制三个.js曲线

Question

我创建了一个球体，并且正在接收两个向量。我只需要在球体表面画一条线来连接点。

我觉得这个问题与大圆圈密切相关，但我不确定如何实施它。 https://en.wikipedia.org/wiki/Great-circle_distance

我注意到如果xStart + xEnd是＆gt; 0，然后xOffset为正（y和z相同）。这使曲线弯曲到全球的短路径。我的问题是曲线不在地球上，弧的高度根据两点而变化。我意识到偏移不仅仅是线性的，但我不知道该怎么做。

非常感谢任何帮助。

tinymce.init({
    selector: '#idOfTextarea',
    menubar: false,
    toolbar: 'bold italic underline strikethrough | bullist numlist outdent indent | link | copy paste undo redo | removeformat'
});

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