02.04. 添加一些自适应
04 添加一些自适应
在上一节中,已经实现了 HelloThree 最为基础的示例。本节将进一步优化那个示例。
我们将给示例中的 canvas 添加宽高自适应,让它充满整个浏览器。
优化第一项:修改 canvas 尺寸
默认 canvas 尺寸为 高150像素,宽300像素。我们现在把 canvas 修改为撑满屏幕。
第1处修改:
打开项目中 src/indes.scss ,修改 html、body、root 样式:
body{
- margin:0;
}
html,body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
}
#root {
+ height: inherit;
+ width: inherit;
}
由于我们已经给 html, body 设置了 宽高 100%,所以 root 宽高 设置为 inherit 即可。
第2处修改:
新建文件 src/components/hello-threejs/index.scss,添加 canvas 样式:
.full-screen {
display: block;
width: inherit;
height: inherit;
}
canvas 宽高继承于 root,root 继承于 body,而 body 宽高均为 100%,所以最终 canvas 宽高也为 100%,撑满整个屏幕。
特别提醒: 在上面样式中,我们设置了 display 为 block,让 canvas 由 内联元素 改为 块级元素。
为什么要这么做?
因为我们在后面代码中,需要获取 canvas 的 clientWidth(内部实际宽度) 和 clientHeight(内部实际高度),而内联元素是无法获取到这 2 两个属性值的,因此我们要将画布修改为块级元素。
内联元素和没有 CSS 样式的元素,获取到的 clientWidht 和 clientHeight 的值永远为 0
第3处修改:
在 src/components/hello-threejs/index.stx 中引入并添加样式
+ import './index.scss'
const HelloThreejs: React.FC = () => {
...
return (
<canvas ref={canvasRef} className='full-screen' />
)
}
此时,再次执行预览 yarn start
,就会发现 canvas 已全屏,充满整个浏览器可见区域。
目前存在的问题:
可以观察到 canvas 是被硬生生由原本的 高150、像素 宽 300 像素给硬生生拉伸成 100%。
所以立方体出现了 扭曲、模糊、锯齿。
那我们继续修改代码。
第4处修改:
修改 src/components/hello-threejs/index.stx 中 render 函数的代码,让镜头宽高比跟随着 canvas 宽高比,确保立方体不变形。
...
const render = (time: number) => {
time = time * 0.001
+ const canvas = renderer.domElement //获取 canvas
+ camera.aspect = canvas.clientWidth / canvas.clientHeight //设置镜头宽高比
+ camera.updateProjectionMatrix() //通知镜头更新视椎(视野)
cubes.map(cube => { ... }
}
...
第5处修改:
第4步立方体已经不再变形,但是依然模糊,锯齿感比较明显。原因是渲染器(renderer) 渲染出的画面尺寸小于实际网页 canvas 尺寸。
继续修改 src/components/hello-threejs/index.tsx 中 render 函数的代码。
...
const render = (time: number) => {
time = time * 0.001
const canvas = renderer.domElement //获取 canvas
camera.aspect = canvas.clientWidth / canvas.clientHeight //设置镜头宽高比
camera.updateProjectionMatrix() //通知镜头更新视椎(视野)
+ renderer.setSize(canvas.clientWidth, canvas.clientHeight, false)
+ //第3个参数为可选参数,默认值为 true,false 意思是阻止因渲染内容尺寸发生变化而去修改 canvas 尺寸
cubes.map(cube => { ... }
}
...
经过上面一番修改,浏览器中 canvas 里的立方体会变得不变形,且非常清晰。
关于 renderer.setSize() 第 3 个参数的补充说明:
在本示例中 renderer 是 WebGLRenderer 实例。
我查看了一下 WebGLRenderer setSize() 源码:https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js
发现了其中以下代码片段:
this.setSize = function ( width, height, updateStyle ) {
...
if ( updateStyle !== false ) {
_canvas.style.width = width + 'px';
_canvas.style.height = height + 'px';
}
...
}
可以看出,假设第 3 个参数不传值,那么该参数值实际调用时为 undefined,undefined !==false 的值为 true 。
因此我们可以得出结论:setSize() 第 3 个参数的默认值为 true,当我们希望控制尺寸的主动权完全由 canvas 决定时,那么一定要设置第 3 个参数为 false。
如何应对高清屏?
从上面示例可以看出,浏览器中渲染的画面尺寸,完全是按照 CSS 样式尺寸来显示的。
对于高清屏(HD-DPI)来说,那 Three.js 渲染的画面又该有何应对呢?
第1种策略(推荐):不做任何策略
假设 HD-DP 比例为 3x,即原本 1 像素 则由 3 x 3 ,共 9 个像素来显示。
也就是说原本只需渲染 1 像素,现在需要渲染 9 像素,所消耗的性能是原来的 9 倍。
假设 3D 场景内容稍微复杂一些,那所带来的渲染性能要求会非常高,画面清晰的代价是更高性能的消耗,引起的卡顿 会带来不好的用户体验。
事实上高清屏本身都会做显示优化,即使不做任何处理,画面清晰度并不会明显特别差。
因此,什么都不做,其实是一个非常好的策略。
假设就是想设置成高清屏,那又该如何操作呢?
第2种策略(强烈不推荐):通过 renderer.setPixelRatio 来配置渲染分辨率倍数
在浏览器中,通过 window.devicePixelRatio 可获得当前屏幕物理分辨率与 CSS 样式分辨率的比值。
然后告知渲染器,以后任何 renderer.setSize 都按照此 比值(倍数) 进行渲染
renderer.setPixelRatio(window.devicePixelRatio)
强烈不推荐这种做法。
第3种策略(勉强推荐):按屏幕分辨率比值,计算出对应渲染尺寸
这种策略思路是:通过分辨率比值,计算出实际上应该渲染的最大尺寸,然后渲染出这个尺寸,再将画面内容渲染到 canvas 中。
举例:假设 HD-DP 比例为 3x,即 普通宽 1 像素对应高清屏宽 3 像素。那么可以将 renderer 渲染出比 canvas 实际大 3 倍的画面,然后再将画面以 “压缩” 3 倍的形式填充到 canvas 中,从而实现所谓的 “高清屏渲染”。
这样的操作,会使 渲染器 renderer 像正常渲染一样来执行各种渲染操作。
对应的渲染代码为:
const canvas = renderer.domElement
const ratio = window.devicePixelRatio
const newWidth = Math.floor(canvas.clientWidth * ratio)
const newHeight = Math.floor(canvas.clientHeight * ratio)
renderer.setSize(newWidth,newHeight,false) //特别注意,第 3 个参数一定要为 false
尽管第 3 种策略相对第 2 种好一些,但是还是建议选择第 1 种策略,即什么也不做。
你看在线视频时,关于清晰度会做哪种选择?
A:蓝光 1080P,画面超级清晰,但播放时会有点卡顿
B:高清 720 P,画面清晰度能够接受,播放时也非常流畅
至此,关于 Three.js 的入门演示示例,已经结束。
等一等,我们现在的代码正确吗?
目前来说,虽然实际运行没有一点问题,但代码实际上并不是最优的。
现在做给渲染器添加尺寸发生变化的代码是放在了 window.requestAnimationFrame() 中,每一次浏览器刷新都重新计算并设置一次,事实上在浪费着性能。
我们需要改进的地方时:仅在浏览器窗口尺寸发生 resize 事件时去修改 渲染器 即可。
需要说明的地方:
- 监听浏览器窗口尺寸变化,对应的是 window.addEventListener('resize', xxxx)
- 当 React 卸载后,一定记得移除监听 window.removeEventListener('resize', xxxx)
- 为了在移除监听时可以找到 在 useEffect中定义的 resize 事件处理函数,我们会在示例代码中,再通过 useRef 创建一个变量指向 事件处理函数。
最终修改后的代码:
import React, { useRef, useEffect } from 'react'
import { WebGLRenderer, PerspectiveCamera, Scene, BoxGeometry, Mesh, DirectionalLight, MeshPhongMaterial } from 'three'
import './index.scss'
const HelloThreejs: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null)
const resizeHandleRef = useRef<() => void>()
useEffect(() => {
if (canvasRef.current) {
//创建渲染器
const renderer = new WebGLRenderer({ canvas: canvasRef.current })
//创建镜头
//PerspectiveCamera() 中的 4 个参数分别为:
//1、fov(field of view 的缩写),可选参数,默认值为 50,指垂直方向上的角度,注意该值是度数而不是弧度
//2、aspect,可选参数,默认值为 1,画布的高宽比,例如画布高300像素,宽150像素,那么意味着高宽比为 2
//3、near,可选参数,默认值为 0.1,近平面,限制摄像机可绘制最近的距离,若小于该距离则不会绘制(相当于被裁切掉)
//4、far,可选参数,默认值为 2000,远平面,限制摄像机可绘制最远的距离,若超出该距离则不会绘制(相当于被裁切掉)
//以上 4 个参数在一起,构成了一个 “视椎”,关于视椎的概念理解,暂时先不作详细描述。
const camera = new PerspectiveCamera(75, 2, 0.1, 5)
//创建场景
const scene = new Scene()
//创建几何体
const geometry = new BoxGeometry(1, 1, 1)
//创建材质
//我们需要让立方体能够反射光,所以不使用MeshBasicMaterial,而是改用MeshPhongMaterial
//const material = new MeshBasicMaterial({ color: 0x44aa88 })
const material1 = new MeshPhongMaterial({ color: 0x44aa88 })
const material2 = new MeshPhongMaterial({ color: 0xc50d0d })
const material3 = new MeshPhongMaterial({ color: 0x39b20a })
//创建网格
const cube1 = new Mesh(geometry, material1)
cube1.position.x = -2
scene.add(cube1)//将网格添加到场景中
const cube2 = new Mesh(geometry, material2)
cube2.position.x = 0
scene.add(cube2)//将网格添加到场景中
const cube3 = new Mesh(geometry, material3)
cube3.position.x = 2
scene.add(cube3)//将网格添加到场景中
const cubes = [cube1, cube2, cube3]
//创建光源
const light = new DirectionalLight(0xFFFFFF, 1)
light.position.set(-1, 2, 4)
scene.add(light)//将光源添加到场景中
//设置透视镜头的Z轴距离,以便我们以某个距离来观察几何体
//之前初始化透视镜头时,设置的近平面为 0.1,远平面为 5
//因此 camera.position.z 的值一定要在 0.1 - 5 的范围内,超出这个范围则画面不会被渲染
camera.position.z = 2
//渲染器根据场景、透视镜头来渲染画面,并将该画面内容填充到 DOM 的 canvas 元素中
//renderer.render(scene, camera)//由于后面我们添加了自动渲染渲染动画,所以此处的渲染可以注释掉
//添加自动旋转渲染动画
const render = (time: number) => {
time = time * 0.001
// cube.rotation.x = time
// cube.rotation.y = time
cubes.forEach(cube => {
cube.rotation.x = time
cube.rotation.y = time
})
renderer.render(scene, camera)
window.requestAnimationFrame(render)
}
window.requestAnimationFrame(render)
const handleResize = () => {
const canvas = renderer.domElement
camera.aspect = canvas.clientWidth / canvas.clientHeight
camera.updateProjectionMatrix()
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false)
}
handleResize() //默认打开时,即重新触发一次
resizeHandleRef.current = handleResize //将 resizeHandleRef.current 与 useEffect() 中声明的函数进行绑定
window.addEventListener('resize', handleResize) //添加窗口 resize 事件处理函数
}
return () => {
if (resizeHandleRef && resizeHandleRef.current) {
window.removeEventListener('resize', resizeHandleRef.current)
}
}
}, [canvasRef])
return (
<canvas ref={canvasRef} className='full-screen' />
)
}
export default HelloThreejs
再次补充说明:
尽管代码已经有所改进,但上述代码中,创建 3D 场景的代码都集中在 useEffect(() => { if (canvasRef.current) { ... } }, [canvasRef] ) ,这很显然并不是合理的。
合理的应该是通过 useState() 去将 renderer、camera、scene 等都独立出来定义。
将原本集中的代码分散到更多小的 代码块 中。
包括浏览器窗口 resize 事件处理,都应该添加 防抖 策略。
这里就先暂时这样,不再做改进,等到将来再去做稍微复杂点的 场景应用 时,会再次优化代码结构。
以下内容更新于 2021.05.11
通过 ResizeObserver 来监听画布尺寸变化
在本文以及本教程的所有后面章节中,我们都是通过监听 window resize 事件,在 handleResize 处理函数中重新设置 相机和渲染器 的一些属性配置的。
由于这些示例中实际上只存在一个 <canvas > 标签,画布(canvas) 的尺寸是充满整个浏览器窗口,画布尺寸发生变化的情况只有一种,即 浏览器窗口尺寸发生变化。
但是在实际的项目中,有可能 <canvas > 标签仅仅只占 document.body 中的一部分而已,造成 画布(canvas) 尺寸发生变化,还有以下几种可能:
- 通过 CSS 修改 <canvas > 标签的宽高
- 在 flex 布局下,当其他元素尺寸发生变化时,影响到 <canvas > ,从而造成画布发生尺寸变化。
- ...
很明显,通过 CSS 的变化造成 画布尺寸变化,和 window resize 完全不相关联。
因此我们要寻找其他监听 画布 标签尺寸发生变化的方式。
我们可以通过浏览器最新的 ResizeObserver 来监听 <canvas > 尺寸变化。
ResizeObserver简介
ResizeObserver 是现代浏览器 API 中一个新的内置类,它可以监控某个 DOM 元素尺寸变化。
在 ResizeObserver 出现之前,只能对 window 添加 resize 监听,无法对 DOM 元素添加尺寸变化监听。
observer 单词意思是 “观察”,也就是设计模式中的 “观察模式”,但是我个人习惯性有时候称呼为 “监控模式”
ResizeObserver 一共有 3 个方法:
- observe():开始监控(观察)某元素尺寸变化
- unobserve():停止监控(观察)某元素尺寸变化
- disconnect():取消和结束目标元素上所有的监控(观察)
更多详细介绍,请查阅:
https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver
实际示例代码:
const handleResize = () => {
const canvas = renderer.domElement
camera.aspect = canvas.clientWidth / canvas.clientHeight
camera.updateProjectionMatrix()
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false)
}
handleResize()
//我们不再添加 window resize 监控(观察)
- window.addEventListener('resize', handleResize)
//改为使用 ResizeObserver 来监控(观察)尺寸变化
+ const resizeObserver = new ResizeObserver(() => {
+ handleResize()
+ })
+ resizeObserver.observe(canvasRef.current)
//当我们卸载组件前,一定要 清除掉 监控(观察)
return () =>{
- window.removeEventListener('resize', resizeHandleRef.current)
+ resizeObserver.disconnect()
}
请注意,resizeObserver.observe() 方法中,可以有第 2 个可选参数。
例如:resizeObserver.observe(canvasRef.current, { box: 'border-box' })
如果第 2 个可选参数不填,那么默认值为 { box: 'content-box' }
与本文无关的事情
我在查阅 MDN 关于 ResizeObserver.observer() 介绍时,发现 简体中文(zh-cn) 介绍页中缺少对第 2 个参数,也就是可选参数的中文介绍,于是我就向 MDN 提交了 PR,添加上了该部分。
https://github.com/mdn/translated-content/pull/817
目前该 PR 已经被合并进 main 中,但是正常访问的 MDN 网页中还未更新过来,估计过一段时间就会看到。
或许此刻已经更新了。
以上内容更新于 2021.05.11
那么接下来,会系统学习一下 Three.js 的一些基础理论。
大楼究竟能改多高,取决于地基有多深,加油!