three.js 编辑器的相机与视角系统

three.js 编辑器的相机与视角系统本文围绕three.js 编辑器一款基于 Three.js 的 AI 驱动可视化低代码编辑器展开。- 在线预览 https://z2586300277.github.io/threejs-editor/- GitHub 开源仓库 https://github.com/z2586300277/three-editor- 文档地址 https://z2586300277.github.io/three-editor/docs/dist相机是用户观察 3D 世界的窗口而视角系统则是把“看”这件事变得有序、可控、可复用。three.js 编辑器围绕透视相机与轨道控制器构建了一套完整的视角体系既满足日常编辑的灵活观察也支持漫游、定点巡视和 AI 自动构图。透视相机与轨道控制编辑器默认使用THREE.PerspectiveCamera并通过OrbitControls实现旋转、平移、缩放三位一体的观察方式。在“相机配置”面板中用户可以调整 FOV、近裁剪面、远裁剪面、zoom 等参数在“轨道配置”面板中可以开启自动旋转、设置阻尼、限制极角与方位角、调整缩放速度。这些参数都会保存到场景 JSON切换场景时自动还原。为了让大场景与小物体都能清晰呈现编辑器默认开启了对数深度缓冲logarithmicDepthBuffer用户也可以在右下角的设置中手动开关。像素比调节功能则允许用户在性能与画质之间做权衡设置后自动刷新生效。视角记录与飞行three.js 编辑器内置了视角记录组件viewAngle。用户在调整好一个理想观察点后点击“保存”即可把相机位置与目标点写入组件点击“查看”则通过 GSAP 在 1 秒内平滑飞回该视角。这对于建筑漫游、产品展示、数据大屏等需要多视点切换的场景非常实用。AI 助手也封装了saveViewAngle与flyToViewAngle动作。用户可以说“保存当前视角叫主视图再飞回第一个视角”AI 会自动完成记录与飞行。所有视角都存储在editor.other.viewAngleList中可以通过listViewAngles列出。自动视角适配当用户加载模型或添加组件时编辑器会自动计算对象包围盒并通过getObjectViews推荐一个合适的相机位置。createGsapAnimation会把这个推荐位置以动画方式过渡到当前相机避免出现对象飞出视野或相机突兀跳转的情况。这种自动适配不仅提升了用户体验也让 AI 在批量添加对象后无需人工调整视角。变换模式与视角解耦顶部工具栏提供了“选中 / 平移 / 旋转 / 缩放 / 预览”五种模式。前四种模式下用户可以通过 TransformControls 编辑对象预览模式下轨道控制器与相机行为完全释放侧栏自动折叠适合最终演示。这种设计让编辑视角与运行视角自然分离用户在预览时不会误触对象。视角持久化与分享相机位置、目标点、轨道控制器参数都会作为perspectiveCamera和orbitControls字段保存到场景 JSON。通过 URL 分享场景时接收方打开后会直接看到与你完全一致的观察角度。结合视角记录你甚至可以分享一套完整的漫游脚本。代码一瞥下面是viewAngle组件中保存与恢复视角的核心实现function captureView() {const cam controls.object; saved { position: cam.position.toArray(), target: controls.target.toArray() }; label.view saved; ElMessage.success(视角已保存进组件); }function applyView() { if (!saved) return; const cam controls.object; const [px, py, pz] saved.position; const [tx, ty, tz] saved.target; gsap.to(cam.position, { duration: 1, x: px, y: py, z: pz, ease: power2.inOut }); gsap.to(controls.target, { duration: 1, x: tx, y: ty, z: tz, ease: power2.inOut }); }从透视参数调节到视角记录从自动适配到 AI 飞行three.js 编辑器的相机与视角系统把 Three.js 中零散的相机控制封装成了一套面向场景叙事的工具集。调好视角故事已经成功了一半。