Javascript 用 Three.js 画一个圆（没有阴影）

Draw a circle (not shaded) with Three.js

提问by theblang

I am trying to draw a circle very similar to the orbital patterns on thiswebsite. I would like to use Three.js instead of pure WebGL.

我正在尝试绘制一个与本网站上的轨道模式非常相似的圆圈。我想使用 Three.js 而不是纯 WebGL。

回答by mrienstra

Three.js r50 added CircleGeometry. It can be seen (albeit with a face) in the WebGL Geometries example.

添加了 Three.js r50 CircleGeometry。它可以在WebGL 几何示例中看到（尽管有一张脸）。

The first vertex in the geometry is created at the center of the circle (in r84, see CircleGeometry.js line 71, in r65, see CircleGeometry.js line 18), which is nifty if you are going for that "full Pac-Man" or "uninformative pie chart" look. Oh, and it appears to be necessary if you are going to use any material aside from LineBasicMaterial/ LineDashedMaterial.

几何体中的第一个顶点创建在圆的中心（在 r84 中，请参阅CircleGeometry.js 第 71 行，在 r65 中，请参阅CircleGeometry.js 第 18 行），如果您想要“完整的吃豆人”或“无信息的饼图”外观。哦，如果您要使用除LineBasicMaterial/之外的任何材料，这似乎是必要的LineDashedMaterial。

I've verified that the following code works in both r60 & r65:

我已经验证以下代码在 r60 和 r65 中都有效：

var radius   = 100,
    segments = 64,
    material = new THREE.LineBasicMaterial( { color: 0x0000ff } ),
    geometry = new THREE.CircleGeometry( radius, segments );

// Remove center vertex
geometry.vertices.shift();

// Non closed circle with one open segment:
scene.add( new THREE.Line( geometry, material ) );

// To get a closed circle use LineLoop instead (see also @Hymanrugile his comment):
scene.add( new THREE.LineLoop( geometry, material ) );

PS: The "docs" now include a nice CircleGeometryinteractive example: https://threejs.org/docs/#api/geometries/CircleGeometry

PS：“文档”现在包含一个很好的CircleGeometry交互式示例：https: //threejs.org/docs/#api/geometries/CircleGeometry

回答by Drew Noakes

The API changed slightly in newer versions of threejs.

新版本的 Threejs 中的 API 略有变化。

var segmentCount = 32,
    radius = 100,
    geometry = new THREE.Geometry(),
    material = new THREE.LineBasicMaterial({ color: 0xFFFFFF });

for (var i = 0; i <= segmentCount; i++) {
    var theta = (i / segmentCount) * Math.PI * 2;
    geometry.vertices.push(
        new THREE.Vector3(
            Math.cos(theta) * radius,
            Math.sin(theta) * radius,
            0));            
}

scene.add(new THREE.Line(geometry, material));

Modify segmentCountto make the circle smoother or more jagged as needed by your scene. 32 segments will be quite smooth for small circles. For orbits such as those on the site you link you, you may want to have a few hundred.

segmentCount根据场景的需要，修改使圆圈更平滑或更锯齿。对于小圆圈，32 段将非常平滑。对于您链接的站点上的轨道，您可能需要几百个。

Modify the order of the three components within the Vector3constructor to choose the orientation of the circle. As given here, the circle will be aligned to the x/y plane.

在Vector3构造函数中修改三个组件的顺序以选择圆的方向。如此处所示，圆将与 x/y 平面对齐。

回答by theblang

I used code that Mr.doob references in this github post.

我使用了 Mr.doob 在这篇 github 帖子中引用的代码。

var resolution = 100;
var amplitude = 100;
var size = 360 / resolution;

var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial( { color: 0xFFFFFF, opacity: 1.0} );
for(var i = 0; i <= resolution; i++) {
    var segment = ( i * size ) * Math.PI / 180;
    geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( Math.cos( segment ) * amplitude, 0, Math.sin( segment ) * amplitude ) ) );         
}

var line = new THREE.Line( geometry, material );
scene.add(line);

回答by Cristian Garcia

This example is in the Three.js documentation:

这个例子在 Three.js 文档中：

var material = new THREE.MeshBasicMaterial({
    color: 0x0000ff
});

var radius = 5;
var segments = 32; //<-- Increase or decrease for more resolution I guess

var circleGeometry = new THREE.CircleGeometry( radius, segments );              
var circle = new THREE.Mesh( circleGeometry, material );
scene.add( circle );

回答by Hyman

var getStuffDashCircle2 = function () {

var segment = 100, radius = 100;

var lineGeometry = new THREE.Geometry();
var vertArray = lineGeometry.vertices;
var angle = 2 * Math.PI / segment;
for (var i = 0; i < segment; i++) {
    var x = radius * Math.cos(angle * i);
    var y = radius * Math.sin(angle * i);
    vertArray.push(new THREE.Vector3(x, y, 0));
}
lineGeometry.computeLineDistances();
var lineMaterial = new THREE.LineDashedMaterial({ color: 0x00cc00, dashSize: 4, gapSize: 2 });
var circle = new THREE.Line(lineGeometry, lineMaterial);

circle.rotation.x = Math.PI / 2;
circle.position.y = cylinderParam.trackHeight+20;
return   circle;
}

回答by bjorke

See the three.js sample http://mrdoob.github.com/three.js/examples/webgl_lines_colors.htmlto see how to draw colored lines.

请参阅three.js 示例http://mrdoob.github.com/three.js/examples/webgl_lines_colors.html以了解如何绘制彩色线条。

A circle like the ones you cite is drawn as a large # of little straight segments. (Actually, the ones you show may be ellipses)

一个像你引用的圆被画成一个大的小直线段。（其实你显示的可能是省略号）

回答by Andrew

I had to do this lol:

我不得不这样做哈哈：

function createCircle() {
    let circleGeometry = new THREE.CircleGeometry(1.0, 30.0);
    circleGeometry.vertices.splice(0, 1); //<= This.
    return new THREE.LineLoop(circleGeometry,
        new THREE.LineBasicMaterial({ color: 'blue' }));
}
let circle = createCircle();

Reason:Otherwise, it doesn't draw a "pure" circle, there's a line coming from the center to the rim of the circle, even if you use LineLoop instead of Line. Splicing (removing) the first vertex from the array is a hack but seems to do the trick. :)

原因：否则，它不会绘制“纯”圆，即使您使用 LineLoop 而不是 Line，也会有一条从圆心到圆边缘的线。从数组中拼接（删除）第一个顶点是一种技巧，但似乎可以解决问题。:)

(Note that apparently, according to mrienstra's answer, "Oh, and it appears to be necessary if you are going to use any material aside from LineBasicMaterial / LineDashedMaterial.")

（请注意，显然，根据mrienstra 的回答，“哦，如果您要使用 LineBasicMaterial / LineDashedMaterial 以外的任何材料，这似乎是必要的。”）

---

---

If you want thickness, though, you're screwed("Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value.")... Unless you use: https://github.com/spite/THREE.MeshLine

但是，如果您想要厚度，那么您就搞砸了（“由于大多数平台上带有 WebGL 渲染器的 OpenGL 核心配置文件的限制，无论设置值如何，线宽始终为 1。”）...除非您使用：https： //github.com/spite/THREE.MeshLine

Code example for that is here: https://stackoverflow.com/a/61312721/1599699

代码示例在这里：https: //stackoverflow.com/a/61312721/1599699