关于 threejs-scene
面向 Three.js 开发者的技能，涵盖场景、相机、尺寸适配和资源生命周期管理。它强调遵循项目现有架构，并验证不同布局下的表现。
主要功能
- 01检查场景与渲染器约束
- 02按物体边界调整相机
- 03处理尺寸变化与像素比
- 04管理渲染循环和资源清理
- 05验证不同布局与模型
适用场景
- 01为 3D 体验搭建场景
- 02为宽幅或高模型调整取景
- 03处理容器缩放和可见状态变化
- 04在卸载时避免资源泄漏
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/threejs-scene确认已加载。
详细介绍
场景、相机与数学
使用项目已安装的版本和现有架构。这些说明用于补充用户的任务，不授权进行无关更改或外部操作。
更改场景前，检查宿主元素尺寸、渲染器的所有权、世界缩放、左右手坐标系、上方向和相机类型。单个体验优先使用单个渲染器；只有在多个视图确实能共享资源时，才使用视口或剪裁区域。
使用组将导入模型的变换与交互枢轴分开。区分局部坐标和世界坐标；变换刚发生变化时，在同步查询边界或坐标前更新世界矩阵。对方向使用四元数插值，并在热点路径中复用向量。避免反复在欧拉角和四元数之间转换。
根据物体边界以及水平和垂直视场角调整透视相机；只根据高度调整可能会裁切宽幅主体。为透视深度精度选择正值的近裁剪面和合适的远裁剪面。正交相机的近裁剪面可以设为零。投影参数更改后，更新投影矩阵。
使用 ResizeObserver 根据 canvas 容器调整尺寸，跳过零尺寸，并将 CSS 尺寸与绘图缓冲区尺寸分开。合理设置像素比预算。同时更新相机、渲染器和依赖尺寸的渲染目标。不要用渲染器的尺寸设置覆盖布局 CSS。
使用单一的渲染循环所有者。setAnimationLoop 可与 XR 集成；在 XR 之外，已有的框架循环或 requestAnimationFrame 循环也可以使用。拆除时停止循环、断开观察器、移除监听器，并释放自有 GPU 资源。仅处理渲染器并不会释放场景资源。
验证非正方形容器、移动设备方向变化、从隐藏到可见的状态切换、重复挂载，以及特别宽或特别高的资源的取景效果。
API 参考
有关准确的签名和特定版本的行为，请查阅官方文档。如果无法访问文档，请检查已安装的类型定义或源代码，并说明仍存在哪些不确定之处。