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

我知道这有点老了，但是三个。RingGeometry将是一个很好的解决方案。

只需使用thetaLength参数来调整曲线长度。尽管实际上是在绘制圆环的一部分而不是真实的圆弧，但是您可以非常轻松地添加厚度。

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

用three.js绘制一个开放弧

2 个答案: