Loading SVG image with the depthTest & depthWrite set to true makes it z-fight itself

I am trying to load an SVG image using the SVGLoader and my scene has many other geometries (transparent & non-transparent). In order to have the 3D perception on the SVG geometry, I need the depthTest & depthWrite to set to true but that makes the geometry appears to be z-fighting.

Please tell me if there’s a way to have the depth and stop the geometry z-fighting itself.

I’m not aware of a solution to avoid the z-fighting without setting depthWrite to false.


Okay…I was trying to use SVG because it is easy to change the color values of the path or mesh dynamically.

If I rather use a plane mesh with PNG texture, what should be the best way to change the color of the mesh or material based on a random user selected color. I’ve tried pixel manipulation but that requires replacement of a lot of pixel colors.

Please tell me, what according to you should be the best way to accomplish that?

It’s probably best if each selectable part is a separate mesh. You can then easily select a part of the model via raycasting. I guess you can use most of the logic from the following example for such a use case: three.js webgl - interactive cubes

Actually it’s just a label with text on it, so I was using a plane with texture map. On top of that I’m trying to implement a theme based color modification of the label…If it wasn’t text on the label I would’ve used separate meshes…since rendering text will be too heavy…

Would it be any better to use 3 plane meshes arranged one behind other such that z-fighting is avoided, considering there are 3 colors required to be changed on the label?