Hi, I’m trying to draw many thick lines (because other line types lack width support). I need to use Raycaster to check if it intersects with each line, so BufferGeometryUtels.mergeGeometrics is not suitable for this. However, BatchedMesh is only compatible with standard meshes. Can anyone provide some suggestions? Thanks!
Convert your Line2
instances to a single LineSegments2 and merge as many lines as your heart desire.
Hi, I checked LineSegments2 and it’s great. But when I add Batchedmesh to the scene, nothing happens. Here’s my code. Can you give me some advice?
const lineMaterial = new LineMaterial({
color: 0xff0000,
linewidth: 1,
});
let positions = [0, 0, 0, 10, 10, 10];
const segmentsGeometry = new LineSegmentsGeometry();
segmentsGeometry.setPositions(positions);
let segments = new LineSegments2(segmentsGeometry, lineMaterial);
let tmesh = new THREE.BatchedMesh(10, 100000, segmentsGeometry.index.count + 1000, lineMaterial);
let a = tmesh.addGeometry(segmentsGeometry);
tmesh.addInstance(a);
scene.add(tmesh);
I understand what you’re trying to achieve, but that’s not how it works. Lines are a special type of geometry, they’re not Meshes. BatchedMeshe
is optimized for Meshes, so it won’t work with lines.
You’ll need to handle your lines separately. The only way to do this is by managing their vertices (or points) manually. You’ll have to apply transformations (translation, scaling, rotation) yourself for each point, there’s no built-in alternative.
LineSegments
is still the best approach since it can render multiple lines in a single draw call.
I’ve put together two examples of hanging lines with the help of Claude AI.
-
The first one uses multiple
THREE.Line
instances: JSFiddle. -
The second one uses a single
THREE.LineSegments
: JSFiddle.
You can compare both approaches and see the difference between the two.
Thank you very much. This is exactly what I want to do - merge line segments and then raycast to pick single line. I can use the index of linesegment to distinguish each line segment. Thanks!!!