threejs-camera

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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"
"透视相机", "正交", "立方体相机"

当用户提及以下内容时，务必使用此技能：

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

重要提示：相机、WebXR 与后期处理的区别

主题	对应技能
标准桌面端投影	threejs-camera
XR 参考空间、瞳距（IPD）	threejs-webxr
合成器中的离屏通道相机	threejs-postprocessing

触发短语包括：

"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.

透视相机：设置
```
aspect
```
= 宽度/高度；在窗口 resize 时更新（参考 threejs-renderers 的示例工作流）。
正交相机：以世界单位定义
```
left/right/top/bottom
```
，适用于 CAD/2.5D 视图。
近/远裁剪面：平衡深度精度与场景包围范围；与雾效相关时参考 threejs-scenes。
CubeCamera：放置在反射探针位置；当场景足够静态时调用
```
update
```
；按文档使用渲染目标输出。
立体/阵列相机：高级用法；引用眼部参数的官方文档；XR 相关问题请转交 threejs-webxr。
投影矩阵：修改参数后调用
```
updateProjectionMatrix()
```
。
辅助工具：
```
CameraHelper
```
位于 threejs-helpers 技能中。

参见 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

文档板块	代表链接
相机（索引）	https://threejs.org/docs/#Cameras
Camera 基类	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

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).

适用范围： 核心相机类与参数；立方/阵列/立体相机概述。
不适用范围： WebXR 参考空间、眼部矩阵、会话生命周期（参见 threejs-webxr）；阴影贴图相机调优（参见 threejs-lights）；合成器内部的通道相机（参见 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.

窗口 resize 后
```
aspect
```
错误会导致图像拉伸——务必与画布同步。
大型场景中
```
near
```
值过小会损失深度精度。
每帧更新
```
CubeCamera
```
性能开销大——请做节流处理以提升性能。

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.

相机参数与

CubeCamera

的更新行为遵循 three.js 文档中的相机板块。WebXR 使用不同的投影路径——当用户提及头显或参考空间时，请转交 threejs-webxr 处理。

Agent response checklist

Agent 响应检查清单

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.

在此技能下回答问题时，优先遵循以下原则：

按需关联

PerspectiveCamera

、

OrthographicCamera

或

CubeCamera

的文档。

相关场景下，将 resize 逻辑与 threejs-renderers 的
```
setSize
```
/ 设备像素比（DPR）模式结合说明。
对于
```
XR
```
/
```
WebXRManager
```
相关问题，在简要提及渲染器后转交 threejs-webxr 处理。
在相机内参修改后，提及
```
updateProjectionMatrix()
```
。
讨论灯光相关的阴影视锥体调试时，使用 threejs-helpers 中的
```
CameraHelper
```
。

References

参考资料

Keywords

关键词

English: perspectivecamera, orthographiccamera, cubecamera, projection, aspect, near, far, three.js

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

英文： perspectivecamera, orthographiccamera, cubecamera, projection, aspect, near, far, three.js

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