最近在使用百度的瓦片图贴图的时候,出现了纹理贴图模糊、不够清晰的问题,请求的瓦片图片资源相同,但是图片作为纹理贴到three.js场景中渲染质量不高。包括stack社区里也有几个类似的提问。
大概有以下几个解决方案,以后碰到类似问题可以尝试下:
1.使three.js场景渲染的canvas分辨率和尺寸保持一致。
canvas.width = w;
canvas.height = h;
canvas.style.width = w;
canvas.style.height = h;
2.设置作为纹理贴图texture的属性
texture.magFilter = THREE.NearestFilter
texture.minFilter = THREE.NearestFilter
//或者尝试修改texture的anisotropy属性:
var maxAnisotropy = renderer.getMaxAnisotropy();
texture1.anisotropy = maxAnisotropy;
3.设置渲染器renderer的属性
precision:"highp"