Question

我试图画一个与this网站上的轨道模式非常相似的圆圈。我想使用Three.js而不是纯WebGL。

Answer 1

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

几何体中的第一个顶点是在圆的中心创建的（在r84中，请参阅CircleGeometry.js line 71，在r65中，请参阅CircleGeometry.js line 18），如果您要“完整”，这是非常好的吃豆人“或”没有信息的饼图“看。哦，如果你打算使用LineBasicMaterial / LineDashedMaterial以外的任何材料，似乎是必要的。

我已经确认以下代码适用于r60和＆amp; 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

我使用了Mr.doob在this github post中引用的代码。

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

Answer 4

此示例位于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 );

Answer 5

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

像你引用的那个圆圈被画成一大片小直线段。（实际上，你展示的那些可能是省略号）

Answer 6

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

Answer 7

我必须这样做：

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 。从数组中拼接（删除）第一个顶点是一个hack，但似乎可以解决问题。：）

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

不过，如果您想要厚度，请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."）...除非您使用：https://github.com/spite/THREE.MeshLine

此处的代码示例：https://stackoverflow.com/a/61312721/1599699

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

7 个答案: