THREE.JS 抗锯齿在多场景设置中不起作用

问题描述

让抗锯齿在小场景(覆盖在大场景之上)正常工作的诀窍是什么?

在这里查看这个小提琴: https://jsfiddle.net/gilomer88/j974zmq0/6/

当您点击任何一个立方体时,您会看到一个新的较小的“detailsS​​cene”出现在主场景的顶部——而那个“detailsS​​cene”中的立方体看起来并不好。 (这里可能看起来并没有那么糟糕,但相信我,在我的真实项目中,我正在加载一个“.glb”模型,它在那里看起来非常糟糕。而且并不是模型关闭。我知道这一点,因为当我加载时它在我的主场景中看起来 100% 完美。除非我出于某种原因必须将它重新加载到这个较小的场景中......?)

否则我很确定我以正确的方式为这个较小的场景设置了渲染器,使用:

detailsRenderer.setPixelRatio( window.devicePixelRatio );

(您会在小提琴代码的 JS 中的第 192 行找到该位。)

有什么想法吗?

解决方法

抗锯齿工作正常。场景只是有点模糊,因为在渲染器以较小的尺寸渲染时画布被放大了。您应该始终设置渲染器的大小,使其与画布大小相匹配。仅仅将画布元素传递给渲染器显然不足以让渲染器知道它应该渲染场景的大小。

detailsRenderer.setSize(detailsCanvas.offsetWidth,detailsCanvas.offsetHeight);

https://jsfiddle.net/sg3fn0tk/

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...