threejs (二) 相机

正交相机

js 复制代码
const camera = new THREE.OrthographicCamera(
          -aspect,
          aspect,
          aspect,
          -aspect,
          0.1, //进平面
          1000 //远平面
        ); // 透视相机

创建相机辅助线

js 复制代码
const cameraHelper = new THREE.CameraHelper(this.camera);

创建一个透视相机观察正交相机

js 复制代码
 // 创建透视相机
        const watchCamera = new THREE.PerspectiveCamera(
          75,
          this.width / this.height
        );
        // 在正交投影后,距离人眼更近
        watchCamera.position.set(2, 2, 6);
        watchCamera.lookAt(this.scene.position);
        this.scene.add(watchCamera);
        this.camera = watchCamera;
        this.watchCamera = watchCamera;

上面的

GUI调试相机参数:dat.gui

可以配置设置对象的属性:可以是numberboolean类型和方法类型,点击gui插件方法名称时,会执行改方法
npm install --save dat.gui

js 复制代码
import * as dat from 'dat.gui';
...,
const gui = new dat.GUI();
        let params = {
          wireframe: false,
          switchCamera: () => {
            if (this.camera.type === 'OrthographicCamera') {
              this.camera = this.watchCamera;
              // 鼠标控制拖动开启
              this.orbitControls.enabled = true;
            } else {
              this.camera = this.otherCamera;
              this.orbitControls.enabled = false;
            }
          },
        };
        gui.add(this.camera.position, 'x', 0.1, 10, 0.1);
        gui.add(this.camera, 'near', 0.01, 10, 0.01).onChange((val) => {
          this.camera.near = val;
          // 矩阵更新函数
          this.camera.updateProjectionMatrix();
        });
        gui.add(this.camera, 'far', 1, 100, 1).onChange((val) => {
          this.camera.far = val;
          // 矩阵更新函数
          this.camera.updateProjectionMatrix();
        });
        gui.add(this.camera, 'zoom', 0.1, 10, 0.1).onChange((val) => {
          this.camera.zoom = val;
          // 矩阵更新函数
          this.camera.updateProjectionMatrix();
        });
        gui.add(params, 'wireframe').onChange((val) => {
          this.mesh.material.wireframe = val;
        });
        gui.add(params, 'switchCamera');

透视相机

相关推荐
huoyingcg2 小时前
3D Mapping秀制作:沉浸式光影盛宴 3D mapping show
科技·3d·动画·虚拟现实
luoganttcc18 小时前
FastPillars:一种易于部署的基于支柱的 3D 探测器
3d
工业3D_大熊18 小时前
3D Web轻量化引擎HOOPS Communicator在装配件管理上的具体优势
3d·3d web轻量化·3d渲染·3d模型可视化·工业3d·web端3d可视化·3d复杂模型轻量化
在下胡三汉19 小时前
3dmax批量转glb/gltf/fbx/osgb/stl/3ds/dae/obj/skp格式导出转换插件,无需一个个打开max,材质贴图在
3d·材质·贴图
xhload3d20 小时前
智能网联汽车云控平台 | 图扑数字孪生
3d·gis·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·车联网·智慧交通·智能网联·汽车云控
木木黄木木21 小时前
使用HTML5和CSS3实现炫酷的3D立方体动画
3d·css3·html5
lb29171 天前
CSS 3D变换,transform:translateZ()
前端·css·3d
淮北4942 天前
ros调试工具foxglove使用指南三:在3d空间写写画画(Panel->3D ->Scene entity)
python·学习·3d·机器人
大有数据可视化2 天前
为什么可视化大屏越来越多应用3D元素呢?
3d
千野竹之卫2 天前
2025最新云渲染网渲100渲染农场使用方法,渲染100邀请码1a12
开发语言·前端·javascript·数码相机·3d·3dsmax