threejs WebGLRenderer 像素比对画布大小的影响

官方文档 - WebGLRenderer

.setPixelRatio ( value : number ) : undefined
设置设备像素比。通常用于避免HiDPI设备上绘图模糊

.setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : undefined
将输出canvas的大小调整为(width, height)并考虑设备像素比,且将视口从(0, 0)开始调整到适合大小 将updateStyle设置为false以阻止对canvas的样式做任何改变。

  • 案例1:
renderer.setPixelRatio(2)
renderer.setSize(100,100,false)

如果没有额外去设置样式的话,以上代码会得到长宽200的canvas:

<canvas data-egine="three.js r158" width="200" height="200">
  • 案例2
renderer.setPixelRatio(2)
renderer.setSize(100,100,true)

以上代码会得到html元素长宽100px,画布长宽200的canvas:

<canvas data-egine="three.js r158" width="200" height="200" style="width: 100px; height: 100px;">

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-06 11:22:07       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-06 11:22:07       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-06 11:22:07       82 阅读
  4. Python语言-面向对象

    2023-12-06 11:22:07       91 阅读

热门阅读

  1. 力扣:196. 删除重复的电子邮箱(Python3)

    2023-12-06 11:22:07       63 阅读
  2. QT基础教程(QPalette和QIcon)

    2023-12-06 11:22:07       53 阅读
  3. mysql中的case when then else end用法

    2023-12-06 11:22:07       64 阅读
  4. (C++20) consteval立即函数

    2023-12-06 11:22:07       65 阅读
  5. map 和 flatMap 的区别

    2023-12-06 11:22:07       57 阅读
  6. 麒麟v10 数据盘初始化 gpt分区

    2023-12-06 11:22:07       96 阅读
  7. golang使用sip实现语音通话

    2023-12-06 11:22:07       55 阅读
  8. LightDB - 支持 last_day 函数[mysql兼容]

    2023-12-06 11:22:07       57 阅读
  9. NLP中几个简单的,字符串相似度计算方法

    2023-12-06 11:22:07       54 阅读
  10. AI:大语言模型LLM

    2023-12-06 11:22:07       60 阅读
  11. Pytest 的小例子

    2023-12-06 11:22:07       58 阅读
  12. css基础

    2023-12-06 11:22:07       58 阅读