调节相机远近角度
- 定义相机的配置:
const cameraConfg = reactive({ fov: 45 })
- 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();});
- 实现效果
调节相机的位置
- 定义参数:
const cameraConfg = reactive({fov: 45,viewX: 0, viewY: 20, viewZ: 10 });
- 初始化相机,设置相机位置。
// 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的配置
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);});
- 最后的效果