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

Question

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

Answer 1

Three.js r50 添加了CircleGeometry。在 WebGL Geometries example 中可以看到(尽管有脸) .

几何中的第一个顶点是在圆的中心创建的(在 r84 中，请参见 CircleGeometry.js line 71 ，在 r65 中，请参见 CircleGeometry.js line 18 )，如果您想要那个“完整的吃 bean 人”，这非常好或“无信息饼图”外观。哦，如果您要使用 LineBasicMaterial/LineDashedMaterial 之外的任何 Material ，这似乎是必要的。

我已验证以下代码在 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