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

<pc-sky>

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

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

属性​

属性タイプデフォルト説明
assetString-テクスチャアセットID (texture型のアセットを参照する必要があります)
centerVector3"0 0.01 0""X Y Z"値としてのスカイの中心 (0-1の範囲)
intensityNumber"1"スカイの明るさの強度
lightingBoolean"false"スカイボックスを光源として使用するかどうか
mip-levelNumber"0"スカイボックスのミップレベル。0が最も鮮明です。値を上げるとぼやけたミップが選択され、テクスチャ自体をぼかすことなくスカイボックスを柔らかくできます
rotationVector3"0 0 0""X Y Z"オイラー角としてのスカイの回転
scaleVector3"100 100 100""X Y Z"値としてのスカイのスケール
typeEnum"infinite"スカイの種類: "box" | "dome" | "infinite" | "none"

例​

正距円筒図法のテクスチャをドーム投影のスカイとして使い、シーンの照明にも利用しています (lighting に注目)。ドラッグで見回せます。type="infinite" や rotation="0 90 0"、より高い mip-level (ソフトになります) も試してみましょう:

ライブサンプル
<pc-app>
    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.21.4/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-scripts>
                <pc-script name="cameraControls" enable-pan="false" pitch-range="-90 0" zoom-range="2 12"></pc-script>
            </pc-scripts>
        </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>要素をプログラムで作成および操作できます。