In the latest versions of threejs, there have been some changes to the 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));

To adjust the smoothness or jaggedness of the circle in your scene, you can modify the segmentCount. A higher count will result in a smoother circle. For larger orbits like the ones on the site you provided, consider using a few hundred segments.

You can also change the order of the components within the Vector3 constructor to alter the orientation of the circle. In this code snippet, the circle is aligned with the x/y plane by default.

I found a funny solution to this problem:

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

Motivation: In order to achieve a perfectly round circle without any lines coming from the center, you need to remove the first vertex from the array. It's a bit of a hack, but it gets the job done. :)

(According to mrienstra's answer, this step is necessary when using materials other than LineBasicMaterial / LineDashedMaterial.)

If you want to control the thickness of the line, unfortunately, there are limitations with OpenGL Core Profile on most platforms. The linewidth will always be 1 regardless of the set value. However, there is a workaround using: https://github.com/spite/THREE.MeshLine

You can find a code example for this solution here:

I implemented code that was inspired by Mr.doob's technique mentioned in this specific GitHub post.

const numPoints = 120;
const magnitude = 50;
const angleIncrement = 360 / numPoints;

const geometry = new THREE.Geometry();
const material = new THREE.LineBasicMaterial({ color: 0xFFFFFF, opacity: 1.0 });

for (let i = 0; i <= numPoints; i++) {
    const angle = (i * angleIncrement) * Math.PI / 180;
    geometry.vertices.push(new THREE.Vector3(Math.cos(angle) * magnitude, 0, Math.sin(angle) * magnitude));
}

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

This particular code snippet can be found in the official documentation for Three.js:

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

let radius = 8;
let segments = 64; // Adjust this value to alter the level of detail

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

I encountered some difficulties with the existing solutions in this scenario - particularly, there was an extra vertex at the center of the circle when using CircleGeometry, and I wasn't fond of the workaround to remove that point.

EllipseCurve proved to be more suitable for my needs (confirmed in r135):

const curve = new THREE.EllipseCurve(
  0.0, 0.0,            // Center x, y
  10.0, 10.0,          // x radius, y radius
  0.0, 2.0 * Math.PI,  // Start angle, stop angle
);

const pts = curve.getSpacedPoints(256);
const geo = new THREE.BufferGeometry().setFromPoints(pts);

const mat = new THREE.LineBasicMaterial({ color: 0xFF00FF });
const circle = new THREE.LineLoop(geo, mat);
scene.add(circle);

I'm not sure exactly when it was introduced, but TorusGeometry seems to be a suitable option for the job... https://i.sstatic.net/0eEb9.png Check out THREE TorusGeometry

const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

It appears that using TorusGeometry shouldn't be significantly more costly compared to the line approach, and it offers flexibility in adjusting size and material options.

After reviewing Andrew's response, I discovered that the code he provided is no longer supported in THREE.REVISION = "150". This resulted in an error message:

An issue occurred when attempting to read properties of undefined (specifically 'splice')

in relation to the following line of code:

circleGeometry.vertices.splice(0, 1);

To address this issue, please refer to the modified code I have included below for a viable solution:

function createCircle() {
    const circleGeometry = new THREE.CircleGeometry(1.0, 30);

    // Remove central vertex
    const itemSize = 3;
    circleGeometry.setAttribute('position',
        new THREE.BufferAttribute(
            circleGeometry.attributes.position.array.slice(itemSize,
                circleGeometry.attributes.position.array.length - itemSize
            ), itemSize
        )
    );
    circleGeometry.index = null;

    return new THREE.LineLoop(circleGeometry,
        new THREE.LineBasicMaterial({ color: 'blue' }));
}
const circle = createCircle();

If you're curious about drawing colored lines using three.js, check out the example at .

The circle shapes mentioned are actually made up of numerous small straight segments. It's possible that the shapes you referenced might even be ellipses.

function createCircleGeometry() {

var segments = 100, radius = 100;

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

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

Instead of creating a 3D shape with a fixed thickness (which can look distorted when zoomed in), you have the option to generate a thin circle that maintains its line quality. This method works well for UI overlays, similar to the example provided by OP.

absarc() and setFromPoints() are particularly handy in this scenario.

//Drawing an orbit at the point 0,0 with designated distance

let points = new THREE.Path().absarc(0, 0, orbitDistance, 0, Math.PI * 2).getPoints(90);
let geometry = new THREE.BufferGeometry().setFromPoints(points);
let material = new THREE.LineBasicMaterial( { color: 0x00ffff, transparent: true, opacity: 0.5 } );
geometry.rotateX( - Math.PI / 2);
let line = new THREE.Line(geometry, material);
    
scene.add(line);

Since it creates a 2D arc, you have the flexibility to move it in 3D space using .position.set(x,y,z), or place it at the 3D origin (0,0,0) like I did here. I adjusted the rotation based on my perspective from the 3D camera angle.

The code provided by mrienstra is no longer supported for THREE.REVISION = "150". An error message is displayed:

An issue with 'shift' function being undefined

occurs at the following line:

geometry.vertices.shift();

Please refer to the corrected code below for a solution:

const radius   = 100,
    segments = 64,
    material = new THREE.LineBasicMaterial( { color: 0x0000ff } ),
    geometry = new THREE.CircleGeometry( radius, segments );
                                            
// Exclude the central vertex
const itemSize = 3;
geometry.setAttribute( 'position',
    new THREE.BufferAttribute(
            geometry.attributes.position.array.slice( itemSize,
                geometry.attributes.position.array.length - itemSize
            ), itemSize
        )
);
geometry.index = null;
                                            
// Rendering an open circle with one segment:
scene.add( new THREE.Line( geometry, material ) );
                                            
// If you want a closed circle, use LineLoop instead (refer to @jackrugile's comment):
scene.add( new THREE.LineLoop( geometry, material ) );

Utilizing the "brute force" methods (such as for, cos, sin) now requires incorporating BufferGeometry instead of Geometry at version R149:
However, I am quite fond of Jammo's "absarc" technique (without g.rotateX()).

function docircle(r, segs, color) {
  let x,y,angle,avertices=[],geometry,material,lines;
  for (let i=0; i<segs; i+=1 ) {
    angle = i/segs*Math.PI*2;
    x = r*Math.cos(angle); y = r*Math.sin(angle);
    avertices.push(x,y,0);
  }
  geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(avertices, 3));
  material = new THREE.LineBasicMaterial( { color:color } );
  lines = new THREE.LineLoop(geometry, material);
  scene.add(lines);
}