mcpField
T
threejs-camera

threejs-camera

github.com/full-stack-skills开发10388 次安装4 周前更新
代码仓库

关于 threejs-camera

面向 three.js 开发者与 Agent 的相机技能，涵盖标准投影相机及立方体、多视图和立体相机。提供参数配置、窗口缩放适配和性能注意事项。

主要功能

  1. 01配置透视与正交相机
  2. 02调整视野及裁剪范围
  3. 03使用 CubeCamera 环境映射
  4. 04了解 ArrayCamera 与 StereoCamera
  5. 05处理窗口尺寸变化与投影矩阵

适用场景

  1. 01为场景选择透视或正交投影
  2. 02窗口缩放后更新相机宽高比
  3. 03生成实时环境反射
  4. 04设置非 XR 的立体或多视图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-camera

安装后在 Claude Code 中输入/threejs-camera确认已加载。

附带文件agents/openai.yamlexamples/workflow-perspective-resize.md

详细介绍

何时使用此技能

当用户提到以下内容时，始终使用此技能：

  • 切换透视与正交投影、fov、aspect、zoom、near、far
  • 使用 CubeCamera 创建实时环境贴图或反射（注意更新频率方面的限制）
  • 使用 ArrayCamera/StereoCamera 实现多视图或立体离轴投影（非 XR）

重要：相机、webxr 与 post 的区别

主题技能
标准桌面投影threejs-camera
XR 参考空间、IPDthreejs-webxr
composer 内部的离屏通道相机threejs-postprocessing

触发短语包括：

  • “PerspectiveCamera”、“OrthographicCamera”、“CubeCamera”、“aspect”、“near”、“far”
  • “透视相机”、“正交”、“立方体相机”

如何使用此技能

  1. 透视投影：设置 aspect = 宽度/高度；调整大小时更新（参见 threejs-renderers 示例工作流）。
  2. 正交投影：以世界单位定义 left/right/top/bottom，用于 CAD/2.5D 视图。
  3. Near/far：在深度精度与包含整个场景边界之间取得平衡；联系雾效进行说明（参见 threejs-scenes）。
  4. CubeCamera：将其放置在反射探针处；仅在场景足够静止时调用 update；按照文档使用渲染目标输出。
  5. 立体/阵列相机：属于高级用法；引用文档中的眼睛参数；XR 问题转交给 threejs-webxr。
  6. 投影矩阵：修改参数后调用 updateProjectionMatrix()。
  7. 辅助工具：CameraHelper 属于 threejs-helpers。

参见 examples/workflow-perspective-resize.md。

文档索引（官方）

文档部分代表性链接
相机（索引）https://threejs.org/docs/#Cameras
相机https://threejs.org/docs/Camera.html
透视相机https://threejs.org/docs/PerspectiveCamera.html
正交相机https://threejs.org/docs/OrthographicCamera.html
立方体相机https://threejs.org/docs/CubeCamera.html
多视图相机https://threejs.org/docs/ArrayCamera.html
立体相机（非 XR）https://threejs.org/docs/StereoCamera.html

范围

  • **涵盖内容：**核心相机类及参数；立方体/阵列/立体相机概述。
  • **不涵盖内容：**WebXR 参考空间、眼睛矩阵、会话生命周期（threejs-webxr）；阴影贴图相机调优（threejs-lights）；composer 内部的通道相机（threejs-postprocessing）。

常见问题与最佳实践

  • 调整大小后 aspect 不正确会导致图像变形——务必与画布同步。
  • 在大型世界中，near 过小会降低深度精度。
  • 每帧都更新 CubeCamera 开销很大——应限制更新频率以提升性能。

文档与版本

相机参数和 CubeCamera 更新行为遵循 three.js 文档中的 Cameras 部分。WebXR 使用不同的投影路径——用户提到头戴设备或参考空间时，应将问题转交给 threejs-webxr。

Agent 回复检查清单

使用此技能回答时，优先采用以下做法：

  1. 根据相关性链接到 PerspectiveCamera、OrthographicCamera 或 CubeCamera。
  2. 如有相关性，将调整大小与 threejs-renderers 的 setSize / DPR 模式搭配说明。
  3. 用户询问 XR/WebXRManager 时，在简要提及渲染器后将问题转交给 threejs-webxr。
  4. 修改内在参数后，提醒调用 updateProjectionMatrix()。
  5. 讨论灯光时，使用 threejs-helpers 的 CameraHelper 调试阴影视锥。

参考资料

关键词

English： perspectivecamera、orthographiccamera、cubecamera、projection、aspect、near、far、three.js

中文： 相机、透视、正交、投影、近裁剪、远裁剪、CubeCamera、three.js

评论

支持 Markdown