メインコンテンツまでスキップ

<pc-camera>

<pc-camera>タグはカメラコンポーネントを定義するために使用されます。

使用法
  • <pc-entity>の直接の子要素である必要があります。

属性​

属性タイプデフォルト説明
clear-colorColor"0.75 0.75 0.75 1"スペース区切りのRGBA値、16進数コード、または名前付きカラーとしての背景色
clear-color-bufferBoolean"true"カメラがカラーバッファをクリアするかどうかを制御します
clear-depthNumber"1"デプスバッファをクリアする際の深度値
clear-depth-bufferBoolean"true"カメラがデプスバッファをクリアするかどうかを制御します
clear-stencil-bufferBoolean"true"カメラがステンシルバッファをクリアするかどうかを制御します
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"正射影の高さ。projectionが"orthographic"のときにのみ使用されます
priorityNumber"0"カメラのレンダリング優先度
projectionEnum"perspective"カメラの投影方式: "perspective" | "orthographic"。正射影のサイズはortho-heightで指定します
rectVector4"0 0 1 1""X Y Width Height"値としてのビューポート矩形
scissor-rectVector4"0 0 1 1""X Y Width Height"値としてのシザー矩形
tonemapEnum"none"トーンマッピング: "none" | "aces" | "aces2" | "filmic" | "hejl" | "linear" | "neutral"

例​

遠くへ連なるボックスの列です。fov を変えたり、projection="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を使用して、<pc-camera>要素をプログラムで作成および操作できます。