How to use LineSegments2 to render "fat" lines?

Questions
1

I’m struggling to get LineSegments2 to render fat lines from a single geometry, using indices to set the line segments.

I can get it to work fine using “standard” lines so I think I’m generating my positions and indices in the right format:

const points = [x2, y1, z1, x2, y2, z2... etc etc];
const indexes = [1,2, 2,3... etc etc]

const geometry = new BufferGeometry();
geometry.setAttribute("position", new Float32BufferAttribute(points, 3));
geometry.setIndex(indexes);
const line = new LineSegments(
      geometry,
      new LineBasicMaterial()
);

Given there’s no official example for LineSegments2, I referred to https://threejs.org/examples/?q=fat#webgl_lines_fat for the difference between using THREE.Line and Line2, and came up with what I think is the correct approach when using LineSegments2:

import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry';

const geometry = new LineSegmentsGeometry();
geometry.setPositions(points);
geometry.setIndex(indexes);
const material = new LineMaterial({ color: 0xffffff, linewidth: 4 });
material.resolution.set(window.innerWidth, window.innerHeight);
const line = new LineSegments2(geometry, material);

But the lines appear broken, plus I get several THREE.LineSegmentsGeometry.computeBoundingSphere(): Computed radius is NaN. The instanced position data is likely to have NaN values. errors in the console.`

Any advice?

1 Like
2

Try use Float32Array for points array.

3

Any luck on this?