用 Three.js 画一个圆(没有阴影)

2022-01-14 00:00:00 geometry javascript three.js

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

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

推荐答案

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

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

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

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.

我已验证以下代码在 r60 和r65:

I've verified that the following code works in both 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 @jackrugile his comment):
scene.add( new THREE.LineLoop( geometry, material ) );

PS:文档"现在包含一个不错的 CircleGeometry 交互式示例:https://threejs.org/docs/#api/geometries/CircleGeometry

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

相关文章