动画
requestAnimationFrame 每一帧的间隔 并不一定是 相同的
每一秒中 移动 1 可以通过 time来计算 但是只有一个时间
可以使用Clock 来创建多个时间 （可以随时启动和停止）
position.x = time % 5 来根据运行的时间 来计算
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()方法
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('立方体')