Javascript 为什么可以'；我在Three.js中用arc（）画一个完整的圆吗？

我试图在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);

相反，它绘制了一个吃豆人形状：

以下是JSFIDLE：

---

如果将Math.PI乘以2.1，而不是2，是否可以解决此问题？

您希望创建一个圆形，以便可以拉伸它

无论何时绘制圆弧，它都会将圆弧的起点连接到当前点，因此在您的情况下，必须使用

moveTo（）

命令在圆的周长上设置起点

var shape = new THREE.Shape();

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

---

three.js r.70

我也遇到过类似的问题：绘制3/4的圆，然后将其挤出，然后将结果（一个3.Mesh）添加到屏幕上。圆圈似乎漏掉了一段。添加

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）后网格如下所示：

作为一种解决方法，请尝试中的一种方法。我正在尝试用圆弧绘制一条更复杂的路径，但它失败得很惨。如果它不能做这个简单的画一个圆的测试用例，那么对于我复杂的路径，它就不可能正常工作。该页上的圆圈似乎使用了二次路径，这可能对我有用。-当使用二次曲线时，路径是闭合的，但是它不是一个圆（因为它们不能用二次贝塞尔曲线表示），可能还不够好。或者WestLangley，请将其作为答案发布，以便我可以接受！我很奇怪为什么当前位置是圆弧的一部分，它似乎是提供给圆弧的中心点、起始角、结束角和方向（）完全定义了曲线，当前位置应该是无关的？谢谢！奇怪的是，如果我将这两个命令作为路径执行，然后将其转换为带有Path.toShapes（false，false）的形状，我仍然可以得到Pacman。如果我只使用形状，而根本不使用路径，它就可以工作。我在上面的评论中链接了一个小提琴，告诉你如何操作。