0

在使用three.js 时,我在webgl 2D 空间中遇到了像素精确纹理的问题。我第一次通过将顶点移动半个像素来解决它,以便我的纹理像素现在准确到位。在这里找到:three.js透明png纹理奇怪的边框webgl

我的第一次尝试发生在一个 100% 宽度和高度的画布上,它覆盖了整个浏览器窗口。相机设置如下所示:

camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000 );

现在我正在尝试将相机调整为特殊尺寸。例如 1000 x 1000 像素。为此,我更改了这样的相机设置:camera = new THREE.OrthographicCamera( -500, 500, 500, -500, - 500, 1000 );

使用此设置,我再次变得模糊而不是像素精确的纹理。我的计划是 webgl 画布的行为就像网页某处的静态画布中的图像 有人可以帮我设置相机吗?我试图在小提琴中设置所有内容,但从外部服务器加载纹理时遇到问题。无论如何,也许你可以看看:http: //jsfiddle.net/kayhR/4/

所以我的问题是我怎样才能确保我的画布和相机设置正确,我不会得到模糊的纹理。

4

0 回答 0