<pc-sky>
<pc-sky>タグは、画像からシーンの空を作ります。すべての背後に描画される背景であり、lightingを付ければシーンのマテリアルを照らし、そこに映り込む環境にもなります。
使用法
<pc-scene>の直接の子である必要があります。
属性
| 属性 | タイプ | デフォルト | 説明 |
|---|---|---|---|
asset | Asset ID | - | テクスチャアセットID (texture型のアセットを参照する必要があります) |
center | Vector3 | "0 0.01 0" | "X Y Z"値としてのスカイの中心 (0-1の範囲)。boxとdomeの種類で使用されます |
intensity | Number | "1" | スカイの明るさと、それが与えるライティングの明るさ |
lighting | Boolean | "false" | スカイの画像でシーンも照らすかどうか。マテリアルへの映り込みも含みます。画像の読み込み時に読み取られます |
mip-level | Number | "0" | スカイボックスのミップレベル。0が最も鮮明です。値を上げるとぼやけたミップが選択され、テクスチャ自体をぼかすことなくスカイボックスを柔らかくできます。ぼやけたミップを作るのはlightingなので、lightingが必要です |
rotation | Vector3 | "0 0 0" | "X Y Z"オイラー角（度単位）としてのスカイの回転 |
scale | Vector3 | "100 100 100" | "X Y Z"値としてのスカイのスケール。boxとdomeの種類で使用されます |
type | Enum | "infinite" | スカイの種類: "box" | "dome" | "infinite" | "none"。"none"は背景を描画しませんが、lightingがあればシーンを照らします |
例
正距円筒図法のテクスチャをドーム投影のスカイとして使い、シーンの照明にも利用しています (lighting に注目)。ドラッグで見回せます。type="infinite" や "0 90 0" の rotation、ライティングだけを残す type="none"、より高い mip-level (ソフトになります) も試してみましょう:
<pc-app>
<pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.6/scripts/esm/camera-controls.mjs"></pc-asset>
<pc-asset id="skybox" src="https://developer.playcanvas.com/assets/sepulchral-chapel-rotunda-4k.webp"></pc-asset>
<pc-scene>
<pc-sky asset="skybox" type="dome" center="0 0.05 0" scale="20 20 20" lighting></pc-sky>
<pc-entity name="camera" position="0 1.5 5">
<pc-camera clear-color="#1d1f2b"></pc-camera>
<pc-script>
<pc-script-instance name="cameraControls" enable-pan="false" pitch-range="-90 0" zoom-range="2 12"></pc-script-instance>
</pc-script>
</pc-entity>
<pc-entity name="sphere" position="0 1 0">
<pc-render type="sphere"></pc-render>
</pc-entity>
</pc-scene>
</pc-app>
JavaScriptインターフェース
SkyElement APIを使用して、<pc-sky>要素をプログラムで作成および操作できます。
属性はプロパティとしても利用できます。スカイそのものはエンジンのシーンの状態、つまりSceneのskyと環境アトラスであり、<pc-scene>要素のsceneプロパティを通じてアクセスします。
関連項目
<pc-asset>— 正距円筒テクスチャアセット<pc-scene>— 露出と、エンジン上でスカイが置かれる場所<pc-light>— スカイの画像ベースライティングと組み合わせる直接光