Question

我正在尝试使用threejs示例中包含的LineMaterial和LineSegments2类来制作比一个像素宽的线条。

我正在尝试遵循此问题的答案中给出的模式：Three.js r91 - how do I use the new linewidth property to fatten/widen lines?

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

如果我的代码如下：

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)

线条根本不显示。

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

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)

我收到此错误：THREE.LineSegmentsGeometry.computeBoundingSphere(): Computed radius is NaN. The instanced position data is likely to have NaN values

如果尝试使用EdgeGeometry作为中间元素，则会在0、0、0处得到一个框，而不是我要创建的线段。我尝试了很多其他选择，例如将几何转换为BufferGeometry，然后在setPositions上调用LineSegmentsGeometry，但这只是给我computeBoundingSphere上的错误再次。

有人可以帮忙吗？

具有LineSegmentsGeometry和LineSegments2的threejs线宽属性

0 个答案: