<pc-render>

<pc-render>タグは、プリミティブ形状 — ボックス、球、カプセル、円錐、円柱、平面、トーラス — をマテリアルで描画するレンダーコンポーネントを追加します。

使用法

<pc-entity>、<pc-model>、または<pc-node> の直接の子である必要があります。

属性

属性	タイプ	デフォルト	説明
`cast-shadows`	Boolean	`"true"`	コンポーネントが影を落とすかどうか
`clip-intersection`	Boolean	`"false"`	`clipping-planes`が、いずれかの平面の裏側にあるものではなく、すべての平面の裏側にあるものだけをクリップするかどうか。その場合、2つの平面はくさび形を、3つの平面は角を切り取ります
`clipping-planes`	String	-	シーンの残りはそのままに、プリミティブをカッタウェイのように切り開く平面。各平面はワールド空間の4つの数値で、法線の"X Y Z"に続けて、ワールド原点が平面の表側にどれだけ離れているかを指定します。複数の平面はカンマで区切ります。`clip-intersection`を付けた`"0 -1 0 0, 0 0 -1 0"`は、原点にあるボックスの4分の1を切り取ります。平面の裏側、つまり法線が指す向きと反対側にある部分は、レンダリングされず、影を落とさず、ピックもできません。使用される平面は8つまでです。カメラがレンダリングするすべてのものをクリップするには、その`<pc-camera>`の`clipping-planes`を使用します
`enabled`	Boolean	`"true"`	コンポーネントの有効状態
`material`	Material ID	-	プリミティブのレンダリングに使用する `<pc-material>` の `id`。省略した場合はデフォルトのマテリアルが使用されます
`receive-shadows`	Boolean	`"true"`	コンポーネントが影を受け取るかどうか
`shadow-cascade-mask`	String	`"0 1 2 3"`	コンポーネントがディレクショナルライトのどのシャドウカスケードに影を落とすか。0（カメラに最も近い）から3までのカスケード番号をスペース区切りで指定します。`"0 1"`は近い2つのカスケードにのみ影を落とし、空の値はどのカスケードにも落としません。`cast-shadows`が必要です
`type`	Enum	`"box"`	レンダリングするプリミティブの形状: `"box"` \| `"capsule"` \| `"cone"` \| `"cylinder"` \| `"plane"` \| `"sphere"` \| `"torus"`

ヒント

glTF/GLBファイルから3Dモデルをレンダリングするには、代わりに <pc-model> を使用してください。

例

7種類のプリミティブ形状すべてです。任意の type を変更してみましょう。<pc-material> を定義すれば material も追加できます:

ライブサンプル

<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 1.5 7" rotation="-10 0 0">
            <pc-camera clear-color="#2a2d36"></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 30 0">
            <pc-light cast-shadows normal-offset-bias="0.05" shadow-bias="0.2" intensity="1.5"></pc-light>
        </pc-entity>
        <pc-entity name="box" position="-3.5 0.5 0">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="sphere" position="-2.1 0.5 0">
            <pc-render type="sphere"></pc-render>
        </pc-entity>
        <pc-entity name="capsule" position="-0.7 1 0">
            <pc-render type="capsule"></pc-render>
        </pc-entity>
        <pc-entity name="cone" position="0.7 0.5 0">
            <pc-render type="cone"></pc-render>
        </pc-entity>
        <pc-entity name="cylinder" position="2.1 0.5 0">
            <pc-render type="cylinder"></pc-render>
        </pc-entity>
        <pc-entity name="torus" position="3.5 0.5 0" rotation="90 0 0">
            <pc-render type="torus"></pc-render>
        </pc-entity>
        <pc-entity name="ground" scale="10 10 10">
            <pc-render type="plane"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScriptインターフェース

RenderComponentElement APIを使用して、<pc-render>要素をプログラムで作成および操作できます。

componentプロパティは、この要素が追加するエンジンのRenderComponentです。要素の準備が完了するまではnullで、属性が公開していないものはすべてここから利用できます。

属性​

例​

JavaScriptインターフェース​

関連項目​

属性

例

JavaScriptインターフェース

関連項目