Using Fat lines for edges

Questions
, ,
1

Is it possible to use the fat lines in conjunctions with the edgesgeometry?

my previous (working) code is like this…

let edges = new THREE.EdgesGeometry(mesh.geometry, angleThreshold);
let material = new THREE.LineBasicMaterial({ color: 0x000000 });
let lines = new THREE.LineSegments(edges,material ));
   mesh.add(lines);

And i tried the following, but I just get a complete mess:

let edges = new THREE.EdgesGeometry(mesh.geometry, angleThreshold);
let material =  new THREE.LineMaterial({ color: 0x000000, width:1 })
let lines = new THREE.LineSegments(edges, material);
   mesh.add(lines);

hrees the result, notice the random massive lines all over
image

I feel like i must be missing something really obvious?

2

No, since THREE.LineMaterial expects a special instanced geometry. THREE.EdgesGeometry only produces a THREE.BufferGeometry without the respective instanced data.

3

Thanks for the (extremely!) quick confirmation.

I assume that then means there is no way for me to get thicker edges for my meshes?

Once again, I appreciate your help.

4

You can try to use THREE.LineSegmentsGeometry.fromEdgesGeometry() and then pass the resulting geometry to THREE.LineSegments.

let edges = new THREE.EdgesGeometry(mesh.geometry, angleThreshold);
let geometry = new THREE.LineSegmentsGeometry().fromEdgesGeometry( edges );
let material =  new THREE.LineMaterial({ color: 0x000000, width:1 })
let lines = new THREE.LineSegments(geometry, material);
mesh.add(lines);
2 Likes
5

thanks for the suggestion, unfortunately I get this which is not what I was expecting at all!!!

image

6

Can you please share a live example with your code?

7

Well its part of a large app which has a lot occurring , so easier said than done, however I can try to strip out some code and get it online, though I suspect for a proper test I would need to load my models in (rather than simple THREE geometry) which I’m not sure how to do if hosted online. I shall attempt using some of the three examples and my models and update the results here in case it’s of interest to anyone.

Many thanks

8

Hey @Mugen87, I tried your suggestion but the lines seemed to go all over the place.

I could not get the live example working because I could not figure out how to import the classes from the examples directory. However, I have extracted the code produces the mesh in question and included it below the image.

Basically trying add lines to the edges but just thicker.

Thanks.

17
171190×1556 74.1 KB

41
411384×1378 44.6 KB 

const hexagon = (x: number, y: number): THREE.Group => {

  const shape = new THREE.Shape()
    .moveTo(x, y)
    .lineTo(x + 1, y + 2)
    .lineTo(x + 3, y + 2)
    .lineTo(x + 4, y)
    .lineTo(x + 3, y - 2)
    .lineTo(x + 1, y - 2)
    .lineTo(x, y);

  const group = new THREE.Group();

  const geo = new THREE.ExtrudeBufferGeometry(shape, {
    depth: 1,
    bevelEnabled: false,
  });

  const mesh = new THREE.Mesh(geo, new THREE.MeshLambertMaterial({
    color: new THREE.Color(0x969696),
    emissive: new THREE.Color(0x969696),
  }));
  group.add(mesh);

  const lines = new THREE.LineSegments(
    new LineSegmentsGeometry().fromEdgesGeometry(new THREE.EdgesGeometry(geo)),
    new LineMaterial({
      color: 0x232323,
      linewidth: 10,
    }),
  );
  group.add(lines);

  return group;
};
9

Are you sure for linewidth: 10?

I can see the coordinates for your geometries are pretty small, so maybe something like linewidth: 0.1 would be best?

10

Yeah, you are correct @Popov72. Lowering the linewidth argument fixes the placement issue.

It just doesn’t achieve the desired line thickness.