I am trying to display the wireframe of OBJ meshes using Three.js. However, Three.js can only render triangles, so I came up with the idea of creating a line for each edge of the model.
After parsing the OBJ file and iterating through its vertices and faces, I was able to achieve the desired functionality.
On the right side, you can see the standard LineSegments model with triangles, while on the left is my attempt at rendering the actual wireframe.
Code: https://codepen.io/flolu/pen/zYrexyr
https://i.sstatic.net/2KSak.png
However, I am facing some challenges with my approach
1. Performance Issues
Adding all the lines seems to cause lag in the viewport, which is surprising given that the model isn't very large.
2. Clipping Problems
In certain areas of the mesh, the lines are not being rendered. This could be due to the inner mesh being rendered with triangles, causing some clipping.
https://i.sstatic.net/zRTkg.png
3. Feasibility Concerns
Since I have limited experience working with OBJ files, I am unsure if this method will work for all meshes. Additionally, I would prefer a solution that can be applied to other file formats as well.
For example, changing line 182 from
const model = antler;
to
const model = test;
loads another model, but some edges are missing. https://i.sstatic.net/0n5r9.png
It would be great if someone could enhance the CodePen example :)