three.js：使用CircleGeometry的LineLoop中的间隙

Question

我在用LineLoop绘制的圈子中看到空隙。这是我的代码：

const discGeometry = new THREE.CircleGeometry(50, 64);
const lineMaterial = new THREE.LineBasicMaterial({
     transparent: true,
     opacity: 0.5,
     color: 0xffffff,
     linewidth: 1.5
});
const zenithEquator = new THREE.LineLoop(discGeometry, lineMaterial);
zenithEquator.rotation.z = THREE.Math.degToRad(90);
scene.add(zenithEquator);

这是结果：

使用Line代替LineLoop还是一样：

很明显，我看到的是这里的圆弧段。如果我增加或减少段数，则间隙会相应变化。

但是无论如何，我如何在没有烦人的空隙的情况下画出这个简单的圆圈？

Answer 1

您可以在顶点数组上使用.shift()：

const discGeometry = new THREE.CircleGeometry(50, 64);
discGeometry.vertices.shift(); // here you remove the first vertex from the array
const lineMaterial = new THREE.LineBasicMaterial({
     transparent: true,
     opacity: 0.5,
     color: 0xffffff,
     linewidth: 1.5
});
const zenithEquator = new THREE.LineLoop(discGeometry, lineMaterial);
zenithEquator.rotation.z = THREE.Math.degToRad(90);
scene.add(zenithEquator);

Answer 2

使用EdgesGeometry生成边并使用LineSegments渲染

const discGeometry = new THREE.EdgesGeometry(new THREE.CircleGeometry(50, 64));
const lineMaterial = new THREE.LineBasicMaterial({
     transparent: true,
     opacity: 0.5,
     color: 0xffffff,
     linewidth: 1.5
});
const zenithEquator = new THREE.LineSegments(discGeometry, lineMaterial);
zenithEquator.rotation.z = THREE.Math.degToRad(90);
scene.add(zenithEquator);