用 three.js 画一个开放的圆弧

Question

我正在尝试使用 three.js 文档中的示例代码使用 three.js 绘制 open 弧线。

此代码的问题在于它从圆弧的终点绘制一条直线回到起点。请问有没有办法画一个开放的圆弧

我在 THREE.Path 上尝试过各种方法，比如 THREE.Path.ellipse，但它们似乎都在做同样的事情。

var curve = new THREE.EllipseCurve(
  0, 0,             // ax, aY
  7, 15,            // xRadius, yRadius
  0, 3/2 * Math.PI, // aStartAngle, aEndAngle
  false             // aClockwise
);
var path = new THREE.Path(curve.getPoints(50));
var geometry = path.createPointsGeometry(50);
var material = new THREE.LineBasicMaterial({color: 0x0000ff});
var ellipse = new THREE.Line(geometry, material);
this.scene.add(ellipse);

Answer 1

如果你想在 three.js 中创建一个开放的弧（或线），你可以使用这样的模式：

var curve = new THREE.EllipseCurve(
    0, 0,             // ax, aY
    7, 15,            // xRadius, yRadius
    0, 3/2 * Math.PI, // aStartAngle, aEndAngle
    false             // aClockwise
);

var points = curve.getSpacedPoints( 20 );

var path = new THREE.Path();
var geometry = path.createGeometry( points );

var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );

var line = new THREE.Line( geometry, material );

scene.add( line );

three.js r.71

Answer 2

我知道这有点旧，但 THREE.RingGeometry 会是一个很好的解决方案。

只需使用 thetaLength 参数来调整曲线长度。虽然你实际上画的是一个环的一部分而不是真正的圆弧，但你可以很容易地增加厚度。

在此处查看文档和交互式演示： https://threejs.org/docs/#api/en/geometries/RingGeometry

用 three.js 画一个开放的圆弧

Drawing an open arc with three.js

javascript

three.js