为什么我不能在Three.js中用arc（）画出一个完整的圆？

Question

我正在尝试使用拉伸圆弧在Three.js中绘制复杂的形状，但是它们似乎行为不正常。 我不知道我是否不了解API，但是这不应该创建一个以原点为中心的半径为100的完整拉伸圆吗？

var path = new THREE.Path();

path.moveTo(0, 0);
path.arc(0, 0, 100, 0, Math.PI * 2, false);

var shape = path.toShapes(false, false);

var extrudeSettings = {
    amount : 20,
    steps : 1
};

var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

var mesh = new THREE.Mesh(geometry, material);

而是绘制一个吃豆子形状：

这是JSFiddle：

http://jsfiddle.net/c8shqzpn/

Answer 1

您想要创建一个圆形，以便可以对其进行拉伸。

每当您绘制圆弧时，它都会将圆弧的起点连接到当前点，因此，在您的情况下，您必须使用moveTo()命令在圆的周界上设置起点。

var shape = new THREE.Shape();

shape.moveTo( circleRadius, 0 );
shape.absarc( 0, 0, circleRadius, 0, 2 * Math.PI, false );

three.js r.70

Answer 2

我在绘制3/4的圆并将其拉伸并将结果（三个网格）添加到屏幕时遇到了类似的问题。 圈子似乎错过了一段。 添加moveTo( x, y )其中x，y是圆弧起点的坐标解决了该问题。 我使用以下代码：

var extrudeSettings = {
    bevelEnabled: false,
    steps: 1,
    amount: 2
};

var shape = new THREE.Shape();
var circleRadius = 4;

// THIS LINE SOLVES THE ISSUE 
shape.moveTo( 0, -circleRadius );

shape.absarc( 0, 0, circleRadius, 0, 1.5 * Math.PI, false );
shape.lineTo( 0, 0 );
shape.closePath();

var geometry = shape.extrude( extrudeSettings );

scene.add( new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() ) );

首先，我的网格看起来像这样：

添加shape.moveTo( 0, -circleRadius ); 网格看起来像这样：

Answer 3

如果将Math.PI乘以2.1（而不是2），是否可以解决？