Three.js 为什么不能用 arc() 画一个完整的圆？答案

【问题标题】：Why can't I draw a complete circle with arc() in Three.js?Three.js 为什么不能用 arc() 画一个完整的圆？
【发布时间】：2016-01-06 23:14:37
【问题描述】：

我正在尝试使用拉伸弧在 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/

【问题讨论】：

作为一种变通方法，请尝试threejs.org/examples/webgl_geometry_shapes.html 中的一种方法。
我正在尝试用弧线绘制更复杂的路径，但失败得很惨。如果它不能做这个简单的画圆测试用例，那么它就没有希望在我的复杂路径上正常工作。该页面上的圆圈似乎使用二次路径，这可能对我有用。
jsfiddle.net/19f7qssj - 使用二次曲线时路径是闭合的，但它不是一个圆（因为它们不能用二次贝塞尔曲线表示spencermortensen.com/articles/bezier-circle）但可能已经足够好了。
jsfiddle.net/19f7qssj/1 或 jsfiddle.net/c8shqzpn/1
WestLangley，请将其发布为答案，以便我接受！我很困惑为什么当前位置是圆弧的一部分，似乎提供给 arc() 的中心点、起始角度、结束角度和方向完全定义了曲线，而当前位置应该无关紧要？

标签： javascript three.js

【解决方案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

【讨论】：

谢谢！虽然奇怪的是，如果我将这两个命令作为 Path 执行，然后使用 path.toShapes(false, false) 将其转换为 Shape，我仍然会得到 Pacman。如果我只使用 Shape 而根本不使用路径，它就可以工作。
我在上面的评论中链接到一个小提琴，向您展示如何做到这一点。

【解决方案2】：

我在绘制 3/4 的圆并将其拉伸并将结果（一个 THREE.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 ); 后，网格如下所示：

【讨论】：

【解决方案3】：

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

【讨论】：