企业官网建设流程全解析

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 中零散的相机控制封装成了一套面向场景叙事的工具集。调好视角，故事已经成功了一半。