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

Question

我试图绘制一个非常类似于本网站上的轨道模式的圆圈.我想使用Three.js而不是纯WebGL.

Answer 1

Three.js r50补充说CircleGeometry.在WebGL Geometries示例中可以看到(尽管有一个面).

几何体中的第一个顶点是在圆的中心创建的(在r84中,参见CircleGeometry.js第71行,在r65中,参见CircleGeometry.js第18行),如果你想要那个"完整的吃豆人",这是非常好的 "或"没有信息的饼图"看.哦,如果你打算使用LineBasicMaterial/ 之外的任何材料,似乎是必要的LineDashedMaterial.

我已经验证以下代码在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:"docs"现在包含一个很好的CircleGeometry交互式示例:https://threejs.org/docs/#api/geometries/CircleGeometry

Answer 2

在较新版本的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));

segmentCount根据场景的需要进行修改以使圆圈更平滑或更加锯齿状.对于小圆圈,32段将非常平滑.对于您链接的网站上的轨道,您可能需要几百个.

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

Answer 3

我必须这样做，哈哈：

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

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

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

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

代码示例在这里：/sf/answers/4291890501/