When to use this skill
ALWAYS use this skill when the user mentions:
- Switching perspective vs orthographic,
fov, aspect, zoom, near, far
CubeCamera for real-time environment maps or reflections (update rate caveats)ArrayCamera/StereoCamera for multi-view or stereo off-axis projection (non-XR)
IMPORTANT: camera vs webxr vs post
| Topic |
Skill |
| Standard desktop projection |
threejs-camera |
| XR reference spaces, IPD |
threejs-webxr |
| Offscreen pass cameras inside composer |
threejs-postprocessing |
Trigger phrases include:
- "PerspectiveCamera", "OrthographicCamera", "CubeCamera", "aspect", "near", "far"
- "透视相机", "正交", "立方体相机"
How to use this skill
- Perspective: set
aspect = width/height; update on resize (threejs-renderers example workflow).
- Orthographic: define
left/right/top/bottom in world units for CAD/2.5D views.
- Near/far: balance depth precision vs containing scene bounds; relate to fog (threejs-scenes).
- CubeCamera: position at reflection probe; call
update when scene static enough; use render target outputs per docs.
- Stereo/Array: advanced; cite docs for eye parameters; defer XR to threejs-webxr.
- Projection matrix: call
updateProjectionMatrix() after parameter edits.
- Helpers:
CameraHelper lives in threejs-helpers.
See examples/workflow-perspective-resize.md.
Doc map (official)
Scope
- In scope: Core camera classes and parameters; cube/array/stereo overview.
- Out of scope: WebXR reference spaces, eye matrices, session lifecycle (threejs-webxr); shadow map camera tuning (threejs-lights); pass-internal cameras in composer (threejs-postprocessing).
Common pitfalls and best practices
- Wrong
aspect after resize stretches image—always sync with canvas.
- Too small
near hurts depth precision in large worlds.
CubeCamera every frame is expensive—throttle for performance.
Documentation and version
Camera parameters and CubeCamera update behavior follow the Cameras section of three.js docs. WebXR uses different projection paths—hand off to threejs-webxr when the user mentions headsets or reference spaces.
Agent response checklist
When answering under this skill, prefer responses that:
- Link
PerspectiveCamera, OrthographicCamera, or CubeCamera as relevant.
- Pair resize with threejs-renderers
setSize / DPR patterns when relevant.
- Route
XR/WebXRManager questions to threejs-webxr after one-line renderer mention.
- Mention
updateProjectionMatrix() after intrinsic changes.
- Use threejs-helpers
CameraHelper for shadow frustum debug when discussing lights.
References
Keywords
English: perspectivecamera, orthographiccamera, cubecamera, projection, aspect, near, far, three.js
中文： 相机、透视、正交、投影、近裁剪、远裁剪、CubeCamera、three.js
能力边界
✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
❌ 不适用场景
常见陷阱 (Gotchas)
- 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
- 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
- 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
- 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
- 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题
使用流程
Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
Step 2: 配置初始化
根据项目需求进行基础配置。
Step 3: 核心功能使用
按照示例代码实现核心功能。
Step 4: 测试验证
运行测试确保功能正常。
Step 5: 部署上线
完成开发后进行部署和监控。
1---2name: threejs-camera3description: three.js cameras: Camera base, PerspectiveCamera, OrthographicCamera, CubeCamera, ArrayCamera, StereoCamera; projection matrices, aspect, FOV, orthographic frustum sizes, near/far planes, and dynamic environment maps with CubeCamera. Use when placing views, rendering reflections, or multi-view splits; for XR projections and eye matrices use threejs-webxr; for post pass camera tricks use threejs-postprocessing alongside threejs-renderers.4---56## When to use this skill78**ALWAYS use this skill when the user mentions:**910- Switching perspective vs orthographic, `fov`, `aspect`, `zoom`, `near`, `far`11- `CubeCamera` for real-time environment maps or reflections (update rate caveats)12- `ArrayCamera`/`StereoCamera` for multi-view or stereo off-axis projection (non-XR)1314**IMPORTANT: camera vs webxr vs post**1516| Topic | Skill |17|-------|--------|18| Standard desktop projection | **threejs-camera** |19| XR reference spaces, IPD | **threejs-webxr** |20| Offscreen pass cameras inside composer | **threejs-postprocessing** |2122**Trigger phrases include:**2324- "PerspectiveCamera", "OrthographicCamera", "CubeCamera", "aspect", "near", "far"25- "透视相机", "正交", "立方体相机"2627## How to use this skill28291. **Perspective**: set `aspect` = width/height; update on resize (**threejs-renderers** example workflow).302. **Orthographic**: define `left/right/top/bottom` in world units for CAD/2.5D views.313. **Near/far**: balance depth precision vs containing scene bounds; relate to fog (**threejs-scenes**).324. **CubeCamera**: position at reflection probe; call `update` when scene static enough; use render target outputs per docs.335. **Stereo/Array**: advanced; cite docs for eye parameters; defer XR to **threejs-webxr**.346. **Projection matrix**: call `updateProjectionMatrix()` after parameter edits.357. **Helpers**: `CameraHelper` lives in **threejs-helpers**.3637See [examples/workflow-perspective-resize.md](examples/workflow-perspective-resize.md).3839## Doc map (official)4041| Docs section | Representative links |42|--------------|----------------------|43| Cameras (index) | https://threejs.org/docs/#Cameras |44| Cameras | https://threejs.org/docs/Camera.html |45| Perspective | https://threejs.org/docs/PerspectiveCamera.html |46| Orthographic | https://threejs.org/docs/OrthographicCamera.html |47| Cube | https://threejs.org/docs/CubeCamera.html |48| Multi-view | https://threejs.org/docs/ArrayCamera.html |49| Stereo (non-XR) | https://threejs.org/docs/StereoCamera.html |5051## Scope5253- **In scope:** Core camera classes and parameters; cube/array/stereo overview.54- **Out of scope:** WebXR reference spaces, eye matrices, session lifecycle (**threejs-webxr**); shadow map camera tuning (**threejs-lights**); pass-internal cameras in composer (**threejs-postprocessing**).5556## Common pitfalls and best practices5758- Wrong `aspect` after resize stretches image—always sync with canvas.59- Too small `near` hurts depth precision in large worlds.60- `CubeCamera` every frame is expensive—throttle for performance.6162## Documentation and version6364Camera parameters and `CubeCamera` update behavior follow the [Cameras](https://threejs.org/docs/#Cameras) section of [three.js docs](https://threejs.org/docs/). WebXR uses different projection paths—hand off to **threejs-webxr** when the user mentions headsets or reference spaces.6566## Agent response checklist6768When answering under this skill, prefer responses that:69701. Link `PerspectiveCamera`, `OrthographicCamera`, or `CubeCamera` as relevant.712. Pair resize with **threejs-renderers** `setSize` / DPR patterns when relevant.723. Route `XR`/`WebXRManager` questions to **threejs-webxr** after one-line renderer mention.734. Mention `updateProjectionMatrix()` after intrinsic changes.745. Use **threejs-helpers** `CameraHelper` for shadow frustum debug when discussing lights.7576## References7778- https://threejs.org/docs/#Cameras79- https://threejs.org/docs/PerspectiveCamera.html80- https://threejs.org/docs/CubeCamera.html8182## Keywords8384**English:** perspectivecamera, orthographiccamera, cubecamera, projection, aspect, near, far, three.js8586**中文：** 相机、透视、正交、投影、近裁剪、远裁剪、CubeCamera、three.js8788## 能力边界8990### ✅ 适用场景91- 当你需要使用此技能对应的技术栈时92- 当项目需要遵循最佳实践时93- 当需要快速上手或深入理解核心概念时9495### ⚠️ 需要注意96- 复杂业务逻辑需要结合具体场景调整97- 性能优化需要根据实际数据量评估9899### ❌ 不适用场景100- 不相关的技术栈或框架101- 需要完全自定义的特殊场景102103## 常见陷阱 (Gotchas)1041051. **版本兼容性**：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异1062. **配置文件格式**：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查1073. **环境变量**：确保所有必要的环境变量已正确设置，敏感信息不要硬编码1084. **依赖冲突**：多版本共存时注意依赖冲突，使用 lock 文件锁定版本1095. **性能陷阱**：大数据量场景下注意性能优化，避免 N+1 查询等常见问题110111## 使用流程112113### Step 1: 环境准备114确保开发环境已安装必要的依赖和工具。115116### Step 2: 配置初始化117根据项目需求进行基础配置。118119### Step 3: 核心功能使用120按照示例代码实现核心功能。121122### Step 4: 测试验证123运行测试确保功能正常。124125### Step 5: 部署上线126完成开发后进行部署和监控。
full-stack-skills