threeJs+vue 添加控制面板gui，修改几何体和页面的背景色
嗨，我是小路。今天主要和大家分享的主题是“threeJs+vue 添加控制面板gui，修改几何体和页面的背景色”。
在现代Web开发中，创建引人入胜的交互式3D内容已成为提升用户体验的关键因素之一。而将Three.js与Vue结合使用，可以让你轻松构建出既美观又功能强大的3D应用程序。今天，我们将介绍如何通过添加一个直观的GUI控制面板来进一步增强你的Three.js项目，使用户能够实时调整几何体的颜色以及页面的背景色。
示例效果图
一、主要属性
1.滑动条
注意：gui库默认设置某个值在一定制定的范围。例如0-100。第三个参数是最小值，第四个参数是最大值。
2.下拉框
定义：gui交互界面显示未下拉框，需要将其第三个参数设置为数组。如：[-100,0,100]或者对象{'left':-100,'center':0,'right':100}。
优点可以设置多个固定的值；值之外不能在使用了。
3.单选框
定义：当变量的类型为布尔类型时，才会生成单选框。
4.颜色选择器
定义：gui库自动生成十进制的颜色值；如果需要使用，需要将其转换成十六进制的数值，并加上#才能在页面中使用。
const bgColor = ref("");
//改变颜色
gui.addColor({color:0x00ffff},'color').onChange((value)=>{
//value是十进制，需要转换成十六进制
bgColor.value = '#'+value.toString(16);
mesh.material.color.set(value)
})5.重命名
定义：将gui界面上的属性进行重命名。如原来x轴字段重命名为几何体的X轴，代码如下：
gui.add(mesh.position,'x',0,100).name('几何体x轴')6.步长
定义：设置交互界面每次改变属性值间隔是多少。
//设置交互界面每次改变属性值间隔是多少
gui.add(mesh.position,'y',0,100).step(0.1)7.值变化回调
定义：当gui界面上的某个值发生了变动，就可以通过onChange方法进行回调。代码如下：
//将对应的属性x重命名
gui.add(mesh.position,'x',0,100).name('几何体x轴').onChange((value)=>{
console.log('x',value)
//改变x时，进行其它的操作
mesh.position.y = 50
})二、实例代码
1、gui封装
定义：在项目开发中，对代码进行一定程度的封装，可以提高代码的美观程度和重复利用率。在上一篇搭建threeJs的基础上，对代码进行封装。
2、整个示例代码
gui库允许开发者快速创建滚动条、颜色选择器等UI元素，从而让开发者及时看到所做的任何更改带来的效果，简化开发流程，提高了开发的效率。 希望这一工具能帮助您更好更快地开发。
都看到这里了，记得【点赞】+【关注】哟。
参考文章：
18. gui.js库(可视化改变三维场景) | Three.js中文网
若想一步步将上面的代码敲一遍，可以参考加深理解：threejs 安装教程-CSDN博客