为什么我不能在 Three.js 中用 arc() 画一个完整的圆? [英] Why can't I draw a complete circle with arc() in Three.js?

问题描述

我试图在 Three.js 中使用挤压弧线绘制一个复杂的形状，但它们似乎表现不正常.我不知道我是否不理解 API，但这不应该创建一个以原点为中心、半径为 100 的完整挤压圆吗?

I'm trying to draw a complex shape in Three.js using extruded arcs but they just didn't seem to be behaving properly. I don't know if I don't understand the API, but shouldn't this create a complete extruded circle of radius 100 centred at the origin?

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);

相反，它绘制了一个吃豆子形状:

Instead it draws a Pacman shape:

这是 JSFiddle:

Here's the JSFiddle:

http://jsfiddle.net/c8shqzpn/

推荐答案

您想要创建一个圆形以便可以将其挤出.

You want to create a circle shape so you can extrude it.

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

Whenever you draw an arc, it connects the start of the arc to the current point, so in your case, you have to use the moveTo() command to set the start point on the perimeter of the circle.

var shape = new THREE.Shape();

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

three.js r.70

three.js r.70

这篇关于为什么我不能在 Three.js 中用 arc() 画一个完整的圆?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！