My goal is to create lines wider than one pixel using the LineMaterial and LineSegments2 classes from the threejs examples library.
To achieve this, I've been following the guidelines provided in the response to a similar inquiry found here: Three.js r91 - how do I use the new linewidth property to fatten/widen lines?
However, I'm encountering difficulties in getting the line segments to display correctly.
When my code is structured like this:
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)
The lines fail to appear.
Alternatively, when I attempt the following approach (presumably the correct way):
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)
I encounter the error message:
THREE.LineSegmentsGeometry.computeBoundingSphere(): Computed radius is NaN. The instanced position data is likely to have NaN valuesIf I opt to use an EdgeGeometry as the intermediary, I end up with a box at 0, 0, 0 instead of the desired line segments. I've tried various other strategies, such as converting the geometry to a BufferGeometry and then applying setPositions on LineSegmentsGeometry, but this only leads to the same error related to computeBoundingSphere.
Any assistance on this issue would be greatly appreciated.