根据设备的像素比调整渲染器的像素密度(renderer.setPixelRatio)。

renderer.setPixelRatio(window.devicePixelRatio); 是 Three.js 中的一种优化渲染质量的方法，用于根据设备的像素比调整渲染器的像素密度。

 

设置渲染器的像素比：

• setPixelRatio 方法允许你告诉渲染器使用多少像素来渲染画面。

• 通常情况下，像素比设置为设备的 window.devicePixelRatio，以确保在高 DPI（如 Retina）屏幕上渲染的内容清晰。

动态调整：

• window.devicePixelRatio 表示设备的像素比。对于普通屏幕，它的值通常为 1，而在 Retina 屏幕上，它的值可能为 2 或更高。

• 通过设置像素比，Three.js 能根据屏幕分辨率调整渲染质量

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 设置像素比
renderer.setPixelRatio(window.devicePixelRatio);

document.body.appendChild(renderer.domElement);

 

为什么需要设置 setPixelRatio

• 提高清晰度：

  • 在高分辨率屏幕（如 Retina 显示器）上，如果像素比未设置为设备的 devicePixelRatio，图像可能会显得模糊。

• 性能优化：

  • 如果直接使用设备的 devicePixelRatio，会增加渲染的像素数量，进而提高清晰度。但在某些情况下（如性能较低的设备），你可能希望手动将像素比限制为较低的值以减少计算量，提高渲染性能：

     

    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

• 兼容性：

  • 设置像素比是适配多种设备和屏幕分辨率的关键步骤。

 

renderer.setPixelRatio(window.devicePixelRatio) 确保了 Three.js 在高 DPI 屏幕上的内容清晰显示，同时支持动态适配不同设备的像素密度，是实现高质量渲染的重要步骤。