Eliminating diagonals on wireframe

I’m got an MorphBlendMesh that I’m animating via AnimationMixer that I would like to add a quad-style wireframe to. Setting “wireframe: true” on the materialobviously doesn’t work, since the triangle approach gives the appearance of the squares that I want, but with “diagonals”. In other words, I want this:

as opposed to this:


I’ve tried using LineSegments with EdgesGeometry and LineBasicMaterial, but this setup doesn’t seem to be capable of animating with AnimationMixer. I’ve also tried writing a custom shader and using ShaderMaterial/RawShaderMaterial, but I don’t know much at all about raw webgl code (and time is a factor) and I run into similar problems of not really knowing how to deal with the animation so this approach is not prefered.

I keep coming back to the wireframe attribute on the material. Is there a change that I can make to the Three.js code to have webgl NOT render the ‘diagonals’ in the wireframe? Or failing that, is there a way I can get LineSegments to animate, or maybe replicate that look on a mesh that WILL animate?

Have a look at those threads:

1 Like

This grid was created with my addon THREEf. The parameters are visible. Almost all default, only style cover and quad line selected. And material cover 0.


The code can be found at

and for Geometry and indexed / non indexed BufferGeometry

Try it out at http://sandboxthreef.threejs.hofk.de/
Maybe something can be used?

1 Like

Forgot to mention earlier – I’m using r83.

Thank you for your replies, but unfortunately I don’t think these will help me. The animation MUST be compatible with AnimationMixer. I’ve come to the opinion that the answer lies within the getWireframeAttribute function of THREE.js. I’m convinced there’s a way to arrange to indices so that the diagonals will simply not be rendered. If so, I can just set wireframe = true. Any ideas on how to set the indices so that this might work?

Just out of curiousity. Is it working, when you use wireframe?

If you mean the wireframe property of the material, it will animate as normal, but the wireframe appears as in the second picture in the original post.

It’s interesting. Can you provide a live example? (jsfiddle, codepen)

Actually, that’s what .toGrid() does. It changes index of an indexed buffer geometry.

I think the solution lies in a function something like the toGrid function, but I’m struggling to figure out how to apply it to my own issue. Your examples all use PlaneBufferGeometry,BoxBufferGeometry, etc. A generic BufferGeometry doesn’t have the widthSegments and heightSegments attributes, which seem to be the basis of the function.

If you provide a live example, I can think on that question :slight_smile:

Sorry if this is a stupid question, but a live example of what, exactly? The code in question is within three.js (r83), specifically the getWireframeAttribute function. So, really any mesh whose material has wireframe = true should work as an example.

A live example of the technique you use. If it’s not a classified top-secret project :slight_smile:
Even if I know what you have, I can’t reproduce your specific case.
Just an off-topic question: what’s the reason of using r83?

There isn’t really one specific case though. All instances will use MeshLambertMaterial and Geometry to create a MorphBlendMesh, but the parameters of the geometry (along with colors, etc) will be supplied by the user (uploaded with JSONLoader) so it could be completely different every time. For the what it’s worth, AnimationMixer is no longer really relevant to this question.

As far as the technique, like I said it’s just Geometry + MeshLambertMaterial = MorphBlendMesh – everything after that is irrelevant. The AnimationMixer animates just fine with wireframe = true, it’s just that the wireframe appears as in the second picture, whereas I want it to appear as the first.

I’m working with an existing code base that uses r83.

Or to put it another way, it’s more of a generic issue that’s independent of the technique used – it needs to be able to work on ANY Geometry, not just for one specific shape, or type of geometry.

Sounds interesting.
Let’s take the simplest example, a plane of 1 x 1 (1 width segment x 1 height segment). It has 4 points and 2 triangles. When you know that it’s just a geometry (you don’t know its specific type - plane, circle, shape etc.), how will you know which sides of triangles you don’t have to show?

I suppose thats the heart of the question. Can we consider both triangles at once, and not show the sides that overlap?

Yeah, not impossible solution.
And here comes the Devil with slight complexity of the geometry:

This part I’m not sure. In this example, we could ignore the lines that overlap AND are the hypotenuse of their triangle, and the third triangle is fine on its own since it doesn’t have a partner, but that won’t apply to the general case, will it?

But we don’t know, where we have to start from.
You offer solutions because you see that those faces are right triangles.
Actually, what we know is that we have a geometry with sets of vertices and faces. That’s all. We even can’t rely on the order of faces:
And we can’t be sure, that the faces are right triangles:
Of course, if I can’t imagine the logics of algorithm for analysis of geometries, then it doesn’t mean that it’s impossible. But it’s hell of math :slight_smile: