我在使用three.js时遇到webgl 2D空间中像素精确纹理的问题。 我通过将顶点移动半个像素来第一次解决它,这样我的纹理的像素现在就准确到位了。在此处找到它:three.js transparent png texture strange border webgl
我的第一次尝试发生在100%宽度和高度的画布上,覆盖了整个浏览器窗口。 相机设置如下所示:
camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000 );
现在我正在尝试将相机调整到特殊尺寸。例如1000 x 1000 px。
为此我更改了相机设置:camera = new THREE.OrthographicCamera( -500, 500, 500, -500, - 500, 1000 );
使用此设置,我再次变得模糊,而不是像素精确的纹理。 我的计划是webgl画布的行为类似于网页中某个静态画布中的图像有人可以帮我处理相机设置吗?我尝试将所有东西放在一个小提琴中,但是我在从外部服务器加载纹理时遇到了问题。无论如何,你可以看看:http://jsfiddle.net/kayhR/4/
所以我的问题是如何确保我的画布和相机设置正确,我不会模糊纹理。