Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在球体测量表面上,从vector3到vector3,在three.js中绘制曲线_Javascript_Three.js - Fatal编程技术网

Javascript 在球体测量表面上,从vector3到vector3,在three.js中绘制曲线

Javascript 在球体测量表面上,从vector3到vector3,在three.js中绘制曲线,javascript,three.js,Javascript,Three.js,我创建了一个球体,接收到两个向量。我只需要在球体的表面上画一条线来连接这些点 我觉得这个问题与大循环密切相关,但我不确定我将如何实施它 我注意到,如果xStart+xEnd大于0,那么xOffset为正(y和z也是如此)。这会将曲线弯曲到环绕地球的短路径。我的问题是曲线不在地球上,弧的高度取决于两点。我意识到偏移量不能只是线性的,但我不知道该怎么做 任何帮助都将不胜感激 var-sphere=new-THREE.SphereGeometry(200100100); //跳过不相关的代码,包括创

我创建了一个球体,接收到两个向量。我只需要在球体的表面上画一条线来连接这些点

我觉得这个问题与大循环密切相关,但我不确定我将如何实施它

我注意到,如果xStart+xEnd大于0,那么xOffset为正(y和z也是如此)。这会将曲线弯曲到环绕地球的短路径。我的问题是曲线不在地球上,弧的高度取决于两点。我意识到偏移量不能只是线性的,但我不知道该怎么做

任何帮助都将不胜感激

var-sphere=new-THREE.SphereGeometry(200100100);
//跳过不相关的代码,包括创建球体网格并将其添加到场景中
var曲线=新的三次方Bezier曲线3(
新的3.Vector3(xStart、yStart、zStart),
新的3.Vector3((xStart+xEnd)/2+xOffset,(yStart+yEnd)/2+yOffset,(zStart+zEnd)/2+zOffset),//带偏移的中点
新的3.Vector3(xEnd,yEnd,zEnd)
);
var geometry=new THREE.geometry();
geometry.Vertexs=曲线.getPoints(50);
var线=新的三线(几何、材料线);

globe.scene.add(行) 假设两个向量和球体的中心是三角形的顶点

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

函数setArc3D(点开始、点结束、平滑度、颜色、顺时针){
//计算法线(取自几何体().computeFaceNormals())
var cb=new THREE.Vector3(),ab=new THREE.Vector3(),normal=new THREE.Vector3();
cb.子向量(新的三个.Vector3(),pointEnd);
ab.子向量(点开始、点结束);
cb.cross(ab);
normal.copy(cb.normalize();
var angle=pointStart.angleTo(pointEnd);//获取向量之间的角度
如果(顺时针)angle=angle-Math.PI*2;//如果顺时针为真,那么我们将走最长的路径
var angleDelta=角度/(平滑度-1);//增量
var geometry=new THREE.geometry();
对于(var i=0;i<平滑度;i++){
geometry.vertices.push(pointStart.clone().applyAxisAngle(normal,angleDelta*i))//这是关键操作
}
var arc=新的三线(几何体,新的三线基本材质({
颜色:颜色
}));
返回弧;
}

示例。

提示、简洁、包含代码、代码注释、包含图片、交互式示例,我能够在5分钟内理解并实现它。。。即使你重新发明了一些东西,你解释得像个老板(不客气),找到你问题的解决方案也是很有趣的。
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;
}