EdgesGeometry Bleedthrough

I have various models that I have edges applied to using this sort of thing…

let edges = new THREE.EdgesGeometry(mesh.geometry, angle);
let lines = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({}), colour))

interestingly i seem to get strange “bleed through” depending on my orbit controllers positions.


this is just a random model from grabcad, but seems to occur with most things. The picture above shows a propeller from a distance away

and here it is closer

and closer still

so as you can see the bleed through is “cured” when I’m closer to the model.

If i take edges off then it has no issues

this is all part of a big app that would be impossible to share/rip out just elements so i appriciate you cant see my code but a couple of questions…

  1. I wanted to test the same model in the three editor to see if its a generic issue, but couldn’t figure out how to add edges, could anyone tell me how ?

  2. Has anyone else seen this issue or can hazard a guess at what could be going wrong? I actually remember years ago I worked with a CAD package which had similar bleed through and the developement team said it was an issue with openGL (not sure how true)

The editor does not support EdgesGeometry so far, sry.

Is it possible for you to share the model?

thanks for the reply. Yeah i can share the model, the screenshot is just a random one off grabcad, but i have uploaded it here… To be honest i can see the problem in (almost) any model i use, it seems to depend on the geometry.

my previous link was for the original file from grabcad which is in X_T format. not sure how useful that so i have uploaded just the fan (Seen in the screenshots) in obj format here.

any help is very much appreciated

I’ve tested your model on my computer and I was not able to reproduce the mentioned issue:


Please try to scale down your model a bit (use obj.scale.set( 0.1, 0.1, 0.1 );) and optimize the near and far plane of your camera. I’ve assinged 1 to near and 1000 to far. The visual glitch you see is maybe a precision issue. A more tight view frustum can help in such cases.

@Mugen87 great thanks for the confirmation.

I actually think it’s due to me using outlineEffect.js - I thought I had tested without it but seems not. Ill refresh myself with how it works and update my findings,

Thanks for testing for me

OK so my bad, its nothing to do with edges geometry, but rather the outline effect. If you would be kind enough to take a look at the following questions…

  1. Again it looks as though the editor doesn’t support me using the outlineEffect (or any effects in general)? The editor seems to be a great resource to test things in the latest version and rule out if what I’m seeing is a generic problem or not. Since it doesn’t have everything THREE has to offer are there any other resources you can suggest to test things with custom models in a “controlled” environment. I could of course knock together a test page - but I would be worried I would inadvertently do something that reintroduces the issue I was testing for which defeats the point of it being a generic test.

  2. Has anyone else experience this issue with the outline effect? All the official examples don’t seem to let you zoom out far without clipping, or have very basic geometry.

  3. You suggest optimizing the near and far…my models will change position and be various sizes, I was under the impression the cameras near/far doesn’t make much difference in terms of performance if one always wants to see everything?.

  4. Was scaling the model down purely a suggestion to fix this particular issue, or do you generally recommend working with smaller/scaled models - my models could range from tiny to huge, but in theory they could all be scaled to fit in a particular size box.

Once again thanks for any input you have in the matter. I would be happy to split my questions into separate threads if that’s more appropriate, just say.

You can try to use one of the official examples as a code basis.

Not yet, sry.

In this case, it’s not about performance but depth precision. A smaller or more tight view frustum means a higher depth precision which can mitigate rendering artifacts like flickering.

It’s a general recommendation since floating point precision issues can occur if your scene has a large scale. If you google this topic, you will see that even game engines like Unity have the same problem, too.

Thanks for taking the time to answer my questions @Mugen87 its very much appreciated.

If anyone has any experience/suggestions about the behavior I’m seeing using the outlineEffect.js i would be very much interested to hear.


You might understand what is happening if you read up on the following topic:


Once you understand this, familiarize yourself with the OutlineEffect implementation, the problem will become very clear and easy to understand.

hint: outline effect is done using geometry.

good luck!