跳到主要内容

<pc-camera>

<pc-camera> 为实体添加摄像机，沿实体负 Z 轴观察并渲染场景。

用法

属性​

属性类型默认值说明
clear-colorColor"0.75 0.75 0.75 1"背景颜色，接受 RGBA、十六进制或颜色名称
clear-color-bufferBoolean"true"是否清除颜色缓冲区
clear-depthNumber"1"清除深度缓冲区时的值
clear-depth-bufferBoolean"true"是否清除深度缓冲区
clear-stencil-bufferBoolean"true"是否清除模板缓冲区
clip-intersectionBoolean"false"是否仅裁去所有平面背后的交集，而非任意平面背后。两平面可切楔形，三平面可切角
clipping-planesPlanes-世界空间剖切平面，作用于摄像机全部内容。0 -1 0 3 隐藏高度 3 以上内容；法线背面不渲染，但阴影仍完整，屏幕空间元素不裁切。最多 8 个平面。仅裁单个对象时用 <pc-render> 的同名属性
cull-facesBoolean"true"是否剔除面
enabledBoolean"true"组件启用状态
far-clipNumber"1000"远裁剪距离
flip-facesBoolean"false"是否翻转面
fovNumber"45"视野角，单位为度
frustum-cullingBoolean"true"是否启用视锥剔除
gammaEnum"srgb"色彩空间：linear 或 srgb
horizontal-fovBoolean"false"是否使用水平视野角而非垂直
near-clipNumber"0.1"近裁剪距离
ortho-heightNumber"10"正交视域半高，实际垂直范围为两倍，仅正交投影使用
priorityNumber"0"摄像机渲染优先级
projectionEnum"perspective"perspective 或 orthographic，正交尺寸由 ortho-height 决定
projection-offsetVector2"0 0"类似移轴镜头的投影窗口偏移，X Y 采用半视锥单位。0 1 上移半个视锥高度，可保持摄像机水平以垂直线平行地拍摄高物体。两种投影均生效，XR 忽略
rectVector4"0 0 1 1"视口矩形，X、Y、宽、高
scene-color-mapBoolean"false"是否在透明物体之前复制场景颜色，供传输折射等材质采样。默认关闭，避免每帧全屏复制。使用 cameraFrame 脚本时由其 rendering.sceneColorMap 决定，此属性不生效
scissor-rectVector4"0 0 1 1"剪裁矩形，X、Y、宽、高
tonemapEnum"linear"色调映射：none、aces、aces2、agx、agx-punchy、filmic、hejl、linear 或 neutral。agx 中性平坦，适合调色；agx-punchy 增强对比度和饱和度

示例​

一列延伸到远处的盒体。修改 fov，或改为 orthographic 并通过 ortho-height 调整范围，观察透视消失：

实时示例
<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 1.5 4" rotation="-15 0 0">
            <pc-camera clear-color="#4a5568" fov="60"></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 30 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="box-near" position="-1.5 0.5 0">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-mid" position="0 0.5 -2">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-far" position="1.5 0.5 -4">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="ground" position="0 -0.5 -2" scale="12 1 16">
            <pc-render type="box"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScript 接口​

可以通过 CameraComponentElement API创建和操作元素。

component 是底层 CameraComponent，就绪前为 null，其余功能可通过它访问。

还提供 WebXR API：startXr(type, space) 与 endXr() 开始和结束会话，arAvailable 与 vrAvailable 分别报告支持情况，详见摄像机 API。

另请参阅​

示例：基本形状、第一人称控制器和裁剪平面。