javascript - 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

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