调节相机远近角度
- 定义相机的配置：
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); }); - 最后的效果
文章来源地址https://www.toymoban.com/news/detail-659774.html
文章来源：https://www.toymoban.com/news/detail-659774.html
到了这里，关于threejs使用gui改变相机的参数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
