抗锯齿 Three.js / WebGL答案

【问题标题】：Anti Aliasing Three.js / WebGL抗锯齿 Three.js / WebGL
【发布时间】：2018-03-05 15:27:07
【问题描述】：

我在使用轨道器旋转模型时遇到抗锯齿问题

我正在使用

renderer = new THREE.WebGLRenderer({ 保留绘图缓冲区：真，抗锯齿：真 });

它有帮助，但没有完全解决问题。

在这个位置看起来不错：

有谁知道如何解决这个问题？或者知道我还能尝试什么？（代码示例将不胜感激）

谢谢

编辑：

好的，我已经添加了这个：

renderer.setPixelRatio(2);

它已经改进了很多（见下面的结果），但仍然显示了一点，

有人有其他想法建议吗？

【问题讨论】：

您使用的是什么浏览器、版本、操作系统和 GPU？
@TheJim01 我建立的是 3D 电子商务商店，允许您自定义产品，以 3D 预览然后添加到购物车，抗锯齿应该适用于所有访问商店购买产品的客户，是使用 WebGL 可能吗？
在某些情况下这是不可能的。例如，较旧的 iOS 设备不支持硬件抗锯齿，因此效果不佳（如您所见）。您仍然可以使用抗锯齿，但只能通过其他途径，例如后期处理 (FXAA example)。

【解决方案1】：

我不完全确定这是否可以解决问题，但可能值得一试。使用下面的示例，将纹理各向异性设置为渲染器的最大各向异性。（我正在使用 webglrenderer）这应该在这个纹理上启用抗锯齿并减少第一张图像中的锯齿线。

texture.anisotropy = renderer.getMaxAnisotropy().

【讨论】：

这应该是评论而不是答案
@user9446733 我正在使用 THREE.ObjectLoader() 来加载 json 模型，是否可以迭代槽纹理并设置它？你能提供一个代码示例吗？谢谢
我相信在包含材质（称为材质或材质）的对象上应该有一个变量，每个材质都有一个贴图，该贴图设置为纹理。在此纹理上，您可以如上所述设置各向异性。

【解决方案2】：

线条是纹理吗？

如果是这样，我有一个类似的问题，然后取决于相机位置不完全在顶部，我的纹理会变得模糊。也许这对你有帮助：

texture.minFilter = THREE.LinearFilter;

【讨论】：