threejs使用gui改变相机的参数

调节相机远近角度

1. 定义相机的配置：

   const cameraConfg = reactive({ fov: 45 })

2. gui中加入调节fov的方法

     const gui = new dat.GUI();
   
     const cameraFolder = gui.addFolder("相机属性设置");
     cameraFolder.add(cameraConfg, "fov", 0, 100).name("修改相机远近").onChange((num) => {
       camera.fov = num;
       camera.updateProjectionMatrix();
     });

3. 实现效果

调节相机的位置

1. 定义参数：

   const cameraConfg = reactive({
       fov: 45,
       viewX: 0, 
       viewY: 20, 
       viewZ: 10
   });

2. 初始化相机，设置相机位置。

   // 2、创建相机
   const camera = new THREE.PerspectiveCamera(
       cameraConfg.fov,
       window.innerWidth / window.innerHeight,
       0.25,
       1000
   );
   camera.position.set(cameraConfg.viewX, cameraConfg.viewZ, cameraConfg.viewY);

3. 加入gui的配置

     const gui = new dat.GUI();
     const cameraFolder = gui.addFolder("相机属性设置");
   
     cameraFolder.add(cameraConfg, "viewX", -50, 50).name("修改视角-x").onChange((num) => {
       cameraConfg.viewX = num;
       camera.position.set(cameraConfg.viewX, cameraConfg.viewZ, cameraConfg.viewY);
     });
     cameraFolder.add(cameraConfg, "viewY", 0, 100).name("修改视角-y").onChange((num) => {
       cameraConfg.viewY = num;
       camera.position.set(cameraConfg.viewX, cameraConfg.viewZ, cameraConfg.viewY);
     });
     cameraFolder.add(cameraConfg, "viewZ", 0, 100).name("修改视角-z").onChange((num) => {
       cameraConfg.viewZ = num;
       camera.position.set(cameraConfg.viewX, cameraConfg.viewZ, cameraConfg.viewY);
     });

4. 最后的效果