抗锯齿不在Three.js中工作

zai*_*i92 22 javascript render antialiasing webgl three.js

我是three.js的新手,并且最近开始使用它.我真的很喜欢它,我创造了一些令人难以置信的东西.但是,我不确定为什么但是当设置抗锯齿为真时我看不出有什么区别.

 renderer = new THREE.WebGLRenderer({ antialiasing: true });
Run Code Online (Sandbox Code Playgroud)

我已经搜索了可能的解决方案,但我似乎无法找到或理解为什么这不起作用.是否有一些我缺少或需要的东西才能使抗锯齿工作?

编辑:

帮助我解决此问题的链接:https : //github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html https://github.com/mrdoob/three.js/tree/master/examples/JS

这需要一些挖掘,但是three.js的开发人员已经覆盖了它!

小智 96

您在WebGLRenderer构造函数的参数对象中使用的属性名称不正确.根据文档,该属性的名称应该是'antialias',而不是 'antialiasing'.

我在Google Chrome for Mac OS中进行了测试,并且在具有旋转立方体的演示中,边缘渲染有明显的平滑.

  • 此外,[黑名单/白名单页面](https://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists)很有趣.例如,如果你在mac上使用chrome,你会看到所有GPU都禁用了抗锯齿功能. (2认同)

Wil*_*ilt 16

该属性被调用antialias,它被激活如下:

renderer = new THREE.WebGLRenderer({ antialias: true });
Run Code Online (Sandbox Code Playgroud)

不适用于所有浏览器,请查看此问题以获取更多信息.


注意:
该属性不可公开访问,因此在构造后设置antialias如下:

renderer.antialias = true; // <-- DOES NOT WORK
Run Code Online (Sandbox Code Playgroud)

不管用.