three如何根据设备像素比调整纹理尺寸（确保清晰度一致）

 通过计算当前设备的像素比 (devicePixelRatio) 来动态调整纹理的尺寸

const dpr = window.devicePixelRatio;

const textureSize = 128 * dpr;

这段代码动态调整纹理大小，以适配设备的像素密度，提供最佳的视觉效果。

texture = new THREE.FramebufferTexture( textureSize, textureSize );
const spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set( textureSize, textureSize, 1 );
sceneOrtho.add( sprite );

 window.devicePixelRatio:

• devicePixelRatio 是一个浏览器提供的属性，用于获取设备的像素比（DPR, Device Pixel Ratio）。

• 它表示 CSS 像素和实际物理像素之间的比例。例如：

  • 在普通屏幕上，devicePixelRatio 通常为 1。

  • 在 Retina 屏幕（高分辨率屏幕）上，devicePixelRatio 通常为 2 或更高。

• 使用这个值可以确保在高分辨率设备上渲染更清晰的纹理或图形。

 

textureSize = 128 * dpr:

• 这行代码根据设备像素比调整纹理的尺寸。

• 如果你硬编码纹理尺寸为 128（适用于标准分辨率设备），在高分辨率设备上纹理可能会显得模糊。

• 为了解决这个问题，代码将纹理尺寸乘以 devicePixelRatio，例如：

  • 如果 dpr = 1（普通屏幕），纹理尺寸为 128 * 1 = 128。

  • 如果 dpr = 2（Retina 屏幕），纹理尺寸为 128 * 2 = 256。

 

这种做法常用于 WebGL 或 Three.js 等图形应用程序中，以确保纹理在各种设备上都有一致的清晰度。