【threejs】使用dat.GUI控制模型

参数：
  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()

效果：