为什么在 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 );

三.js r.70