调节相机远近角度

定义相机的配置：
javascript 复制代码
```
const cameraConfg = reactive({ fov: 45 })
```

gui中加入调节fov的方法

javascript 复制代码

  const gui = new dat.GUI();

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

实现效果

调节相机的位置

定义参数：

javascript 复制代码

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

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

javascript 复制代码

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

加入gui的配置

javascript 复制代码

  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);
  });

最后的效果