threejs使用gui改变相机的参数

调节相机远近角度

  1. 定义相机的配置:

    javascript 复制代码
    const cameraConfg = reactive({ fov: 45 })
  2. 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();
      });
  3. 实现效果

调节相机的位置

  1. 定义参数:

    javascript 复制代码
    const cameraConfg = reactive({
        fov: 45,
        viewX: 0, 
        viewY: 20, 
        viewZ: 10
    });
  2. 初始化相机,设置相机位置。

    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);
  3. 加入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);
      });
  4. 最后的效果

相关推荐
gis分享者2 天前
学习threejs,使用PointLight点光源
threejs·点光源·pointlight
gis分享者6 天前
学习threejs,使用HemisphereLight半球光
threejs·hemispherelight·半球光
gis分享者10 天前
学习threejs,使用Lensflare模拟镜头眩光
threejs·lensflare·眩光
gis分享者13 天前
学习threejs,tga格式图片文件贴图
threejs·贴图·tga·tgaloader
gis分享者14 天前
学习threejs,pvr格式图片文件贴图
threejs·贴图·pvr
gis分享者1 个月前
学习threejs,使用OrbitControls相机控制器
threejs·相机·相机控制器·orbitcontrols
不系舟1781 个月前
threejs 实现镜面反射,只反射指定物体,背景透明
threejs
gis分享者1 个月前
学习threejs,使用RollControls相机控制器
threejs·相机控制器·rollcontrols
gis分享者1 个月前
学习threejs,使用FlyControls相机控制器
threejs·相机控制器·flycontrols
gis分享者1 个月前
学习threejs,使用TrackballControls相机控制器
threejs·trackball·相机控制器