Javascript 具有LineSegmentsGeometry和LineSegments2的threejs线宽属性

我正在尝试使用三个JS示例中包含的

LineMaterial

和

LineSegments2

类制作比一个像素宽的线条

我试图遵循这个问题答案中给出的模式：

但是，我无法使线段显示为线段

如果我的代码如下所示：

const sourcePoint = new THREE.Vector3(ctx.x * window.sceneSettings.size_adjustment,
                                      ctx.y * window.sceneSettings.size_adjustment,
                                      ctx.z * window.sceneSettings.size_adjustment)
const line_geom = new THREE.Geometry()
window.meshObjects.map(sphere => {
  if (sphere.userData.strain == targetStrain && sphere.userData.group != "Nationwide") {
    const targetPoint = sphere.position
    line_geom.vertices.push(sourcePoint, targetPoint)
  }
})
const edges = new THREE.WireframeGeometry(line_geom)
var lsgeom = new THREE.LineSegmentsGeometry().setPositions(edges.attributes.position.array)
const lineMaterial = new THREE.LineMaterial({ color: 0x000000, linewidth: 10 })
lineMaterial.resolution.set( window.innerWidth, window.innerHeight );
var lines = new THREE.LineSegments2(lsgeom, lineMaterial)
lines.computeLineDistances()
scene.add(lines)

这些台词根本没有出现

如果我这样做（这似乎是最正确的）：

我得到这个错误：

THREE.LineSegmentsGeometry.computeBoundingSphere（）：计算的半径为NaN。实例位置数据可能具有NaN值

如果我尝试使用

EdgeGeometry

作为中间元素，我会在0,0,0处得到一个框，而不是我尝试创建的线段。我尝试了其他一些选择，例如将几何体转换为

BufferGeometry

，然后在

LineSegmentsGeometry

上调用

setPositions

，但这只会再次导致

computeBoundingSphere

上的错误

---

有人能帮忙吗？

您是否检查了线几何顶点，以确保其中包含有效值？BufferAttributes也存在类似问题，其中数组未正确初始化。

const edges = new THREE.LineSegments(line_geom)
var lsgeom = new THREE.LineSegmentsGeometry().fromLineSegements(edges)
const lineMaterial = new THREE.LineMaterial({ color: 0x000000, linewidth: 10 })
lineMaterial.resolution.set( window.innerWidth, window.innerHeight );
var lines = new THREE.LineSegments2(lsgeom, lineMaterial)