Problems rendering edge lines as SVG - three.js

Question

I'm trying to draw edge lines on 3D objects rendered in three.js, however the lines do not render correctly when using the SVGRenderer.

Apply edge lines:

  var geo = new THREE.EdgesGeometry( mesh.geometry );
  var mat = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 4 } );
  var wireframe = new THREE.LineSegments( geo, mat );
  mesh.add( wireframe );

(Edges code taken from this answer)

This works as expected with the WebGLRenderer:

https://jsfiddle.net/8p7jja9L/23/

But lines are obscured when using the SVGRenderer:

https://jsfiddle.net/8p7jja9L/24/

(NOTE: NEITHER version renders correctly in Chrome, due to this issue. Use Firefox to see an accurate representation of the WebGL version.)

WestLangley · Accepted Answer · 2017-11-25T01:46:00.123

2

What you are seeing is a limitation of SVGRenderer. There is no depth-testing as there is with WebGLRenderer.

The best you can do is set

wireframe.renderOrder = 1;

This will force the wireframe to render after the mesh. But the entire wireframe will be rendered, giving the appearance of a transparent mesh.

three.js r.88

edited Nov 25 '17 at 01:46

answered Nov 25 '17 at 00:50

WestLangley

102,557
10
276
276

Thank you- however, I couldn't even get this solution to work. The renderOrder does not change - see https://jsfiddle.net/8p7jja9L/30/ – Yarin Nov 25 '17 at 00:59
Sorry, typo. Fixed. – WestLangley Nov 25 '17 at 01:46
Great, that worked (to the degree you explained). Thank you – Yarin Nov 25 '17 at 13:48

Problems rendering edge lines as SVG - three.js

1 Answers1