关于 threejs-camera-direction
threejs-camera-direction 是用于设计 Three.js 场景中镜头构图、运动和模式交接的技能。它面向构建电影化或交互视角的开发者,强调明确的相机控制权、受限输入和转换测试。
主要功能
- 01设定取景、尺度、镜头和地平线
- 02在语义坐标系中构建目标
- 03分别推导位置和朝向
- 04限制环绕与视角输入
- 05涵盖相机状态恢复和转换测试
适用场景
- 01设计追逐、侧视或环绕相机架
- 02添加受限的指针视角控制
- 03测试相机交接和窗口缩放行为
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-camera-direction安装后在 Claude Code 中输入/threejs-camera-direction确认已加载。
附带文件agents/openai.yamlreferences/camera-rig-and-cinematic-systems.md
详细介绍
摄像机方向
将摄像机视为经过设计的视觉系统,而非被动视口。构图主体、确立尺度、选择稳定的上方向参考系,并明确每一次模式切换。
构建顺序
- 定义设计画面:主体尺寸、屏幕占比、镜头、近远裁剪面、运动,以及地平线/上方向约定。
- 在语义参考系中构建摄像机目标:飞船、天体表面、对接轴,或由场景设计的镜头。
- 分别推导位置和朝向,然后再将二者合并。
- 仅在声明的偏航/俯仰角度和空间约束内添加输入驱动的环绕/视角控制。
- 在参考效果使用惯性的情况下,添加与帧率无关的跟随,或有界弹簧。
- 场景负责摄像机时,快照并恢复摄像机投影/状态。
- 测试模式切换、镜头切换、重新获取指针锁、调整窗口大小以及大坐标。
请阅读 references/camera-rig-and-cinematic-systems.md,了解精确的追踪/侧向/环绕机位、投影参数、切换规则、浮动原点镜头、指针控制和实现限制。
不可妥协的规则
- 根据主体尺寸推导偏移;不要为不同缩放比例的资产调整同一个固定距离。
- 对于行星运动,应从主导天体推导上方向,而不是使用全局 Y 轴。
- 使用
lerp插值位置,使用slerp插值朝向。 - 显式切换期间只使用一个插值阶段。不要在同一时间段叠加切换混合和第二层跟随平滑。
- 获取指针锁时,从摄像机重新同步偏航/俯仰角。
- 视场角、近裁剪面、远裁剪面或宽高比发生变化时,更新投影矩阵。
- 大幅平移会造成错误视差或精度损失时,让星空或无限远背景保持相对于摄像机的位置。
- 场景销毁时,恢复摄像机和输入控制权。
路由边界
对象运动时间线、弹簧、对接、布景和碎片请使用 $threejs-procedural-animation。此技能负责场景的观察方式以及摄像机模式之间的切换。
评论
支持 Markdown