Full-stack-skills threejs-camera

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.

install

source · Clone the upstream repo

git clone https://github.com/partme-ai/full-stack-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/partme-ai/full-stack-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/threejs-skills/threejs-camera" ~/.claude/skills/partme-ai-full-stack-skills-threejs-camera && rm -rf "$T"

manifest: skills/threejs-skills/threejs-camera/SKILL.md

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.

Example: Resize handler with updateProjectionMatrix

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

See examples/workflow-perspective-resize.md.

Doc map (official)

Docs section	Representative links
Cameras (index)	https://threejs.org/docs/#Cameras
Cameras	https://threejs.org/docs/Camera.html
Perspective	https://threejs.org/docs/PerspectiveCamera.html
Orthographic	https://threejs.org/docs/OrthographicCamera.html
Cube	https://threejs.org/docs/CubeCamera.html
Multi-view	https://threejs.org/docs/ArrayCamera.html
Stereo (non-XR)	https://threejs.org/docs/StereoCamera.html

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