INTERACTION · 原生 ESM
阻尼轨道相机与俯仰限制Damped orbit controls with pitch limits
OrbitControls 开启阻尼,限制俯仰角与缩放距离,适合产品展示 turntable。
旗舰完整演示
可交互场景(拖拽旋转;部分演示支持键盘)。下方提示词用于让 Agent 生成同级成品。
预期产出 · Returns
原生 ESM HTML(import map):加载任意 mesh 或默认几何体,拖拽手感顺滑,角度受限。
适合用在哪
模型展示、地形浏览、避免用户把相机翻转到地下。
容易踩的坑
- import map 版本与 examples 路径不匹配会 404。
- 未调用 controls.update() 时 enableDamping 无效。
提示词 · Prompt
用「单个 HTML + import map」实现 Three.js 轨道相机最佳实践:
1) import map 指向 esm.sh 的 three 与 OrbitControls 模块;
2) enableDamping = true,dampingFactor 合理;
3) minDistance / maxDistance、minPolarAngle / maxPolarAngle 防止穿地;
4) 双击 mesh 时 animate 相机 target 到该物体中心(可选);
5) 在注释中解释 polarAngle 与相机「钻地」的关系;
6) 提醒:需通过本地静态服务器打开(写清 python -m http.server 命令)。
交付完整 index.html。
Single HTML with import map: damped OrbitControls, pitch/zoom limits, static server note, optional double-click focus.