three.js EdgesHelper showing certain diagonal lines on Collada model

问题

I'm using EdgesHelper on a simple model that I exported from SketchUp. It is showing some diagonal lines like this:

How do I prevent those lines from appearing, so that the edges looks like what it appears in SketchUp? I tried setting the thresholdAngle but it doesn't help.

Update:

Working demo: http://jsfiddle.net/alan0xd7/6vLm5xsa/

This is the look I am trying to achieve:

回答1:

You are rendering both the model and the edges helper in a scene without lights. Remove the model and you can see the helper clearly. All edges are rendered properly.

The reason for the extra edges is because you have two edges concurrent in your model -- a short edge and a long edge. You need to change your geometry. This is not a problem with three.js

If you want to show the edges, but have hidden edges truly hidden, you need to make use of the webgl feature polygonOffset. You can use a pattern similar to the following:

var mesh = dae.children[0].children[0];
mesh.scale.set( 20, 20, 20 );

// replace the material
mesh.material = new THREE.MeshBasicMaterial( {
    color: 0x000000,
    polygonOffset: true,
    polygonOffsetFactor: 1, // positive value pushes polygon further away
    polygonOffsetUnits: 1
} );
scene.add( mesh )

var helper = new THREE.EdgesHelper( mesh, 0xffffff );
helper.material.linewidth = 2;
scene.add( helper );

updated fiddle: http://jsfiddle.net/6vLm5xsa/15/

three.js r.71

来源：https://stackoverflow.com/questions/31226344/three-js-edgeshelper-showing-certain-diagonal-lines-on-collada-model