Outline for each individual node using Edges Geometry

Questions
1

Hi, i have imported a threed model using glb file as input now I am trying to create a 3d model with outline on click of a button called “Add outline”. so i have used Edges geometry to mark the outline for each individual object. but onclick of the button the screen is freezed and becomes unresponsive for around 3 to 4 mins. I have used the below logic
scene.traverse((child) => {
if (child.isMesh) {
const edges = new EdgesGeometry(child.geometry, 15);
const line = new LineSegments(
edges,
new LineBasicMaterial({ color: 0x000000 })
);
child.userData.outline = line
child.add(line);
}
});
I have also tried using outlinePass and effect composer which didnot help to apply outline for each individual node.
Please help if any one of u have done this.

2

You shouldn’t modify the hierarchy inside a .traverse() (by adding your new LineSegments object as a child)
because the traverse might get scrambled as it may or may not traverse the new children you added.

Instead… in the traverse, push the meshes into a list…

then after the traverse… loop through the meshes array and add the geometries.

let meshes=[]
scene.traverse((child) => child.isMesh && meshes.push(child))


let material = new LineBasicMaterial({ color: 0x000000 })
meshes.forEach(child=>{
const edges = new EdgesGeometry(child.geometry, 15);
const line = new LineSegments(edges,material);
child.userData.outline = line
child.add(line);
});
3

Thanks, for replying back. I tried this still my screen is getting freeze and becoming unresponsive for a while after i click on addOutline button. My glb file is of 300MB. I am just searching for alternative for Edges Geometry which applies outline to each individual node.
I have tried OutlineEffect, EffectComposer,OutlinePass but nothing helped me.
and one query in the above approach u r trying to apply outline for the items present in meshes array. so may i know the logic to add the outline to the scene. In my case i am using primitive tag like this
Looking for other approaches
Techstack used - react-three/fiber,react-three/drei

4

Ooooo yeah thats a REALLY big glb file.
Imagine trying to download half a DVD every time you run your app. :smiley:
You can use compression tools to bring that filesize down to something more managable.

regarding outlines… I’m not aware of many other approaches… Are we sure that it’s the outlines that are causing the delay, and not simply the loading of the 300mb GLB?

5

Yeah, i am able to load the glb file with in a minute but applying outline is taking time. even i am removing the outline that was done with no delay