动画（gsap）
动画
requestAnimationFrame 有一个默认的时间参数，运行的时间 单位是毫秒
requestAnimationFrame 每一帧的间隔 并不一定是 相同的
每一秒中 移动 1 可以通过 time来计算 但是只有一个时间
可以使用Clock 来创建多个时间 （可以随时启动和停止）
position.x = time % 5 来根据运行的时间 来计算
Clock 中 getDelta() 方法，得到每一帧的渲染的间隔时间
这个函数不能执行2次 不然就为0，不要使用这个函数
可以控制 start 和 stop
gsap产生动画，有更多的控制能力，还有各个阶段的回调
const animate = gsap.to(cube, { property / duration / repeat / yoyo / ease / delay / onComplete / onStart })
yoyo 来回动画 ease 动画曲线
const an1 = gsap.to(cube.position, { x: 3, duration: 3, ease: 'power1.inOut', yoyo: true, delay: 2, repeat: -1 onComplete() {}, onStart() {} })
an1.isActive() 状态 / pause() 暂停/ resume() 恢复
监听尺寸大小修改
设置阻尼 enableDamping = true 配合 update()方法
屏幕大小改变之后
- 更新摄像头的 宽高比
- 更新摄像机的投影矩阵
- 更新渲染器的大小 setSize
- 更新渲染器的像素比
比如：手机 分辨率 = pixo * 尺寸
const updateSize = () =>{
camera.aspect = width / height 修改相机宽高比例
camera.updateProjectMatrix() 修改相机的投影矩阵
renderer.setSize(width, height) 修改canvas大小
renderer.setPixelratio(window.devicePixelratio) 更新像素比
}
屏幕的像素比 为什么手机 是 2倍，如果是1的话，普通12px的字体可能根本看不见。
避免文字过于小 相当于放大一倍
分辨率越小 显示的文字就越大
全屏展示
const fullScreenEle = document.fullscreenElement
判断该变量 renderer.domElement.requestFullscreen() / document.exitFullscreen()
dat.gui 库
gui = dat.GUI()
gui.add(cube.position, 'x').min(0).max(5).step(0.1).name('xx').onChange(value => {}).onFinishChange(value => {})
修改color
const param = { color: 'red', fn() { gsap.to(...) } }
gui.addColor(param, 'color').onChange(value => cube.material.color.set('yellow'))
gui.add(param, 'fn').name('立方体运动') 点击按钮触发事件
Boolean值：
gui.add(cube, 'visible').name(‘显示’)
const fold = gui.addFolder('立方体')
