多边形之间的 Three.js 画布渲染器接缝 [英] Three.js canvas renderer seams between polygons

问题描述

我已经对这个库感到很舒服，但是这个已经让我很累了:

I'm already feeling comfortable enough with this library, but this one made me tired already:

当我试图简单地渲染一个没有任何纹理的网格，从搅拌机导出到 .obj(三角剖分，平滑组启用)时，WebGL 渲染器可以完美地做到这一点，但我还需要使用画布渲染器使其成为可能，麻烦来了；多边形边之间有接缝，部分可见

When I'm trying to simply render a mesh without any textures, exported from blender to .obj (triangulating, smoothing groups enabled), the WebGL renderer does that perfectly, but I also need to make it possible with canvas renderer, and here comes the trouble; polygon edges have seams between them and become partially seen through

为了说清楚，提供截图

WebGL 渲染器https://www.monosnap.com/image/OVaQO8yLDU9Wl6ufhADDVCEWg

画布渲染器https://www.monosnap.com/image/1AYeyHjWkGx9fQ6vg6xLr0EcV

网格相当复杂，大约有 7k 个三角形

mesh is quite complex, ~7k triangles

推荐答案

使用CanvasRenderer时，需要设置

material.overdraw = 0.5; // or some number between 0 and 1

这将有助于缓解问题.

注意:overdraw 曾经是一个布尔值；它现在是一个浮动.

Note: overdraw used to be a boolean; it is now a float.

three.js r.63

three.js r.63

这篇关于多边形之间的 Three.js 画布渲染器接缝的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！