将边缘线渲染为 SVG 的问题 - three.js

Question

我正在尝试在 three.js 中渲染的 3D 对象上绘制边缘线，但是使用 SVGRenderer 时这些线条无法正确渲染。

应用边缘线：

  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 );

（取自answer的边缘代码）

这可以与 WebGLRenderer 一起按预期工作：

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

但是使用 SVGRenderer 时线条会被遮挡：

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

---

（注意：由于issue，这两个版本都不能在 Chrome 中正确呈现。使用 Firefox 可以查看 WebGL 版本的准确表示。）

Answer 1

您看到的是SVGRenderer 的限制。没有像 WebGLRenderer 那样进行深度测试。

你能做的最好的就是设置

wireframe.renderOrder = 1;

这将强制线框在网格之后渲染。但是会渲染整个线框，呈现出透明网格的外观。

three.js r.88