three.js(六):自适应设备分辨率

自适应设备分辨率

  • 当今大多数的PC端和移动端显示器都是HD-DPI显示器。
  • HD-DPI 是High Definition-Dots Per Inch 的简称,意思是高分辨率显示器。
  • 不同设备的显示器的分辨率是不一样的。
  • 以上图中的iPhone6/7/8 为例:
  • 375*667 代表的手机的屏幕的物理尺寸,如果我们在其中建立一个100% 充满屏幕的,那其尺寸就是375*667。
  • Dpr 代表像素密度,2 表示手机屏幕在宽度上有375*2 个像素,在高度上有667*2 个像素,因此iPhone6/7/8 的屏幕的像素尺寸就是750*1334。
  • 当我们在这种像素尺寸大于物理尺寸的高分辨率显示器里绘图的时候,就需要考虑一个问题。
  • 若我们直接在iPhone6/7/8 里建立一个充满屏幕的canvas,那其像素尺寸就是375*667。
  • 这个尺寸并没发挥高分辨率显示器的优势,我们需要先将其像素尺寸设置为750*1334,然后再将其css 尺寸设置为375*667。
  • 这样,就可以让canvas画布以高分辨率的姿态显示在显示器里。
  • 代码示例:
js 复制代码
function resizeRendererToDisplaySize(renderer: WebGLRenderer) {
  const { width, height, clientWidth, clientHeight } = renderer.domElement;
  const [w, h] = [clientWidth * devicePixelRatio, clientHeight * devicePixelRatio];
  const needResize = width !== w || height !== h;
  if (needResize) {
    renderer.setSize(w, h, false);
  }
  return needResize;
}
  • 上面的devicePixelRatio 就是设备像素密度,是window下的属性,即window.devicePixelRatio。
  • 其实,有的时候若不刻意观察,canvas 有没有自适应设备分辨率是很难看出的。
  • 因此,若是对画面的渲染质量要求不高,可以什么都不做,这样也能避免canvas 画布像素尺寸变大后降低渲染效率的问题
相关推荐
Mintopia2 天前
Three.js 场景后处理的秘密:像素世界的魔法改造术
前端·javascript·three.js
Mintopia3 天前
Three.js 流水效果制作:从像素到波澜的魔法之旅
前端·javascript·three.js
不关小白白的事4 天前
🚗 Three.js 实战全解析:打造 SU7 展示 + 人物控制 + HDR 场景 + 碰撞检测
three.js
阿怼丶4 天前
🚶‍♂️基于 Three.js 的自定义角色漫游系统实战:支持碰撞检测与动画控制
前端·three.js
Mintopia4 天前
Three.js 3D 柱状图制作指南:从像素到立体的魔法之旅
前端·javascript·three.js
Mintopia5 天前
Three.js 顶点与颜色点的装配艺术:从像素到彩虹的底层之旅
前端·javascript·three.js
爱看书的小沐5 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
Mintopia6 天前
Three.js 中三角形到四边形的顶点变换:一场几何的华丽变身
前端·javascript·three.js
Mintopia7 天前
Three.js 中的噪声与图形变换:一场数字世界的舞蹈
前端·javascript·three.js
中国黄金Gold8 天前
Three.js OrbitControls:实现鼠标左键直接平移场景
three.js