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

<pc-scene>

<pc-scene>タグは、シーンを定義するために使用されます。

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

属性​

属性タイプデフォルト説明
fogEnum"none"フォグの種類："none" | "linear" | "exp" | "exp2"
fog-colorColor"1 1 1"スペース区切りのRGB値、16進数コード、または名前付きカラーとしてのフォグの色
fog-densityNumber"0"指数フォグタイプの場合のフォグの密度
fog-endNumber"1000"線形フォグの終了距離
fog-startNumber"0"線形フォグの開始距離
gravityVector3"0 -9.81 0"「X Y Z」値としてリジッドボディに適用される重力

例​

リニアフォグの中へ消えていくボックスです。fog-color を変えたり (カメラの clear-color と揃えると定番の深度ヘイズ表現になります)、fog を "exp" にして fog-density を 0.15 にしたりしてみましょう:

ライブサンプル
<pc-app>
    <pc-scene fog="linear" fog-color="#4a5568" fog-start="2" fog-end="10">
        <pc-entity name="camera" position="0 1.5 4" rotation="-10 0 0">
            <pc-camera clear-color="#4a5568"></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 30 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="box-1" position="-1 0.5 0">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-2" position="0 0.5 -3">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-3" position="1 0.5 -6">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-4" position="2 0.5 -9">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="ground" position="0 -0.5 -4" scale="10 1 20">
            <pc-render type="box"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScriptインターフェース​

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