初识 Three.js
之前我们讲到了关于 three 里面的一些移动缩放旋转等动画相关知识
以及我们学习了 gsap 这个动画库的一些基础知识
接下来，我们就来解决一下之前代码的一些遗留问题
首先是我们之前创建的控制器不够真实的问题，我想再这里面添加阻尼
更符合现实生活中的物理规律
有关于控制器的知识，可以参考我之前写的以下文章
那么如何添加阻尼呢，我们来看看官网的例子
.enableDamping : Boolean
将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。请注意，如果该值被启用，你将必须在你的动画循环里调用.update()。
我们需要在控制器里面添加这个 enableDamping 属性
来模拟阻尼，使其有惯性
并且我们需要再在渲染动画里面调用控制器的 update 方法
// 给控制器设置阻尼，使其更加真实
controls.enableDamping = true
function render() {
// 调用 update 方法
controls.update()
renderer.render(scene, camera);
// 浏览器自带方法，在刷新的时候自动执行某个函数↓
requestAnimationFrame(render);
}
之后我们要让他在屏幕大小变化的时候，也进行一个对应的渲染变化
浏览器有一个自带的监听事件是 resize
我们需要在最底下添加一个监听事件
window.addEventListener('resize', () => {
// 更新摄像头的宽高比
camera.aspect = innerWidth / innerHeight
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix()
// 更新渲染器
render.setSize(window.innerWidth, window.innerHeight)
// 设置渲染器的像素比
renderer.setPixelRatio(window.devicePixelRatio)
})
aspect 是摄像机的宽高比属性，我们需要更新一下他相机的宽高比
.updateProjectionMatrix () : undefined
更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
更新投影矩阵，什么是投影矩阵呢
就是三维平面在二维平面上的投影，因为我们的屏幕是二维的
计算机需要通过算法进行二维投影，具体详情可以参考这篇文章
矩阵论（七）：投影矩阵_exp(i)的博客-CSDN博客_投影矩阵
然后更新渲染器和设置渲染器的像素比
更新渲染器也是很简单的，就是更新渲染器的宽高比
他会重新设置渲染的宽高，不更新的话，屏幕就宽高变化就会导致他的渲染范围没有变化
同理，如果相机不更新的话，我们所看到的物体的比例就会发生变化
具体的可以注释一下看看效果
那什么是像素比呢
我们在浏览器 console 页面打印一下看看
发现是他的像素比是1
我们把浏览器调成手机模式
这时候我们发现，他的像素比就是2了
为什么呢，因为手机的实际像素是浏览器的这个像素的两倍
也就是说，浏览器如果是 400850 的像素，那么手机的实际像素是 8001700 的像素
为什么会这样子呢，因为手机上的像素非常的小
我们电脑上看着正常的16像素，到了手机上就变得很小，可能就不能看了
所以浏览器这样子，保证了我们在手机上看到的效果和浏览器开发的时候是一样的
有些时候我们需要双击可以全屏和不全屏，那么我们应该怎么办呢
我们一步一步来看
当我们的浏览器某个元素全屏之后
会在 document 上生成一个 fullscreenElement 对象
如果没有这个对象的话，那么我们就让他进行一个全屏的操作
在元素上有一个方法 requestFullscreen ，这个方法可以让元素进行一个全屏显示
全屏了之后，如果需要退出全屏，那么就是需要在 document 里面进行一个退出操作
因为全屏了之后会在 document 里面生成一个 fullscreenElement 对象
所以我们需要在 document 里面进行退出全屏操作
详情请看一以下代码
window.addEventListener('dblclick', () => {
if(!document.fullscreenElement){
renderer.domElement.requestFullscreen()
} else {
document.exitFullscreen()
}
})
全屏了之后，我们可以在整个屏幕上看到了
接下来，我们来给他添加一下，可以操作的按钮库
npm install dat.gui
具体的方法详情大家可以看看这个
首先我们先让物体能被设置X轴
我们先在页面上引入相关库
import * as dat from "dat.gui";
之后，new 一个新的构造对象出来
const gui = new dat.GUI();
接下来，我们就开始添加对应的参数
gui
// 添加对象，以及要修改的属性名
.add(cube.position, "x")
// 最小值
.min(0)
// 最大值
.max(5)
// 调节的大小
.step(0.01)
// 名字
.name("移动X轴坐标")
// 更改触发钩子函数
.onChange((value) => {
console.log(value);
})
// 更改之后，鼠标松开触发钩子函数
.onFinishChange((value) => {
console.log("完全停下來的時候触发");
});
这是设置一个可以左右移动的值的
与此同时我们还可以设置颜色
const params = {
color: "#4fc08d",
};
gui
.addColor(params, "color")
.onChange((value) => {
cube.material.color.set(value);
})
.name("更改颜色");
设置立方体是否显示
gui.add(cube, "visible").name("是否显示");
设置立方体是否运动
const params = {
color: "#4fc08d",
fn: () => {
gsap.to(cube.position, {
repeat: -1, direction: 5, x: 5, yoyo: true });
},
};
gui.add(params, "fn").name("立方体运动");
如果以上我们觉得添加的多了，会影响页面的美观
那么我们可以添加一个类似折叠效果的目录，可以上下折叠，类似手风琴效果
const folder = gui.addFolder('设置立方体')
folder.add(cube.material, 'wireframe').name('设置线框')
多谢大家看到这里，以上是今天的内容，希望能对你们有所帮助
同时也祝大家新年快乐，万事如意
那么我们下集再见啦~