調節相機遠近角度

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. 最后的效果
   

?