为什么我不能在Three.js中用arc()画一个完整的圆圈?

时间:2015-01-18 10:13:39

标签: javascript three.js

我试图使用挤压弧在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);
相反,它绘制了吃豆子形状:

http://i.gyazo.com/0c3c1beb427ff2627b7b3d273a093ac4.png

这里是JSFiddle:

http://jsfiddle.net/c8shqzpn/

3 个答案:

答案 0 :(得分:3)

您想创建一个圆形,以便拉伸它。

无论何时绘制圆弧,它都会将弧的起点连接到当前点,因此在您的情况下,您必须使用moveTo()命令设置圆周边的起点。 / p>

var shape = new THREE.Shape();

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

three.js r.70

答案 1 :(得分: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() ) );

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

First my mesh looked like this

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

after adding <code>shape.moveTo( 0, -circleRadius );</code>the mesh looked like this

答案 2 :(得分:0)

如果将Math.PI乘以2.1而不是2?

,可以解决这个问题