参数:
gui.add(修改的对象,参数名,最小值,最大值,步数)
方法
gui.add(修改的对象,参数名,最小值,最大值,步数).
onChange(
val=>{
// 每次变化的值
}
)
gui.add(修改的对象,参数名,最小值,最大值,步数).name("左侧的名称")
1.安装dat.GUI
npm install dat.gui
2.在对应的页面引入
import * as dat from ‘dat.gui’;
3.使用dat.GUI(也可以不使用函数的形式)
function datGui() {
// 设置对象的形式
const parmas = {
wireframe: false,//是否显示框线 --------- 设置开关
switchCamera() { //切换视角 ---------- 单击方法
if (camera.type === "OrthographicCamera") {
camera = camera1;
} else {
camera = camera2;
}
camera.updateProjectionMatrix();
scene.add(camera);
},
bgColor: "#000000" // 场景颜色 --------- 设置颜色
}
const gui = new dat.GUI();
// 设置x轴
gui.add(camera.position, "x", 1, 1000, 10).name("X轴")
// 设置near值
gui.add(camera, "near", 0.01, 10, 0.01).name("near值").
onChange((val: any) => {
camera.near = val;
camera.updateProjectionMatrix()
});
// 使用开关的形式控制框线,
gui.add(parmas, "wireframe").name("框线开关").
onChange((val: any) => {
meshALL.forEach((element: any) => {
element.material.wireframe = val;
});
})
// 点击触发设置视角切换的方法
gui.add(parmas, "switchCamera").name("切换视角");
// 设置颜色值,改变场景颜色
gui.addColor(parmas, "bgColor").name("场景颜色").
onChange((val: any) => {
scene.background = new THREE.Color(val);
})
}
datGui()