CODEWITHSUNDEEP
javascriptthree.js3d
Florian Ludewig
Florian Ludewig

Reputation: 6002

How to Properly Render Quad Wireframe in Three.js from OBJ Model?

I want to render the actual wireframe of OBJ meshes with Three.js. Unfortunately, Three.js does only render triangles. Thus my idea was to build a line for every edge of the model.

I was able to get it working by parsing the OBJ file and looping through its vertices and faces.

On the right is the normal LineSegments model with triangles and on the left my attempt to render the actual wireframe.

Code: https://codepen.io/flolu/pen/zYrexyr

wireframes

But there are some problems with my method

1. Performance

The viewport lags after adding all of the lines. This is especially bad considering, that this model isn't really big.

2. Clipping

At some parts of the mesh, lines aren't rendered. Probably because the inner mesh is rendered with triangles, which causes clipping?!

clipping

3. Will this work?

Since I don't have much experience working with OBJ files, I am not sure if this method will work for all meshes. And I would prefer an implementation which can also be applies to other file formats.

For example if you change line 182 from

const model = antler;

to

const model = test;

it will load another model, which doesn't work. Some edges are missing. broken wireframe

It would be awesome if someone could improve the CodePen :)

Upvotes: 2

Views: 1146

Answers (1)

M -
M -

Reputation: 28492

Question 1:

This approach gets very poor performance because you're rendering 4370 lines independently on each frame! That many drawcalls will decimate most machines' framerate. I recommend you create one single LineSegments object with all the necessary vertex pairs, instead of four-thousand individual Line objects. This way all lines get rendered in a single call!

Question 2:

You could avoid clipping by setting the material to depthTest: false and set the renderOrder to a higher number than the white mesh so it renders last, on top of it.

Question 3:

I can't help you here, it depends on how your OBJ is built. I should mention, multiple questions in a single post are frowned upon in Stack Overflow because they reduce the usefulness of the site. In the future, consider breaking it up into individual questions, or you may ask in a more open-ended forum, such as https://discourse.threejs.org

Upvotes: 3

Related Questions