Skip to main content

<pc-scene>

The <pc-scene> tag is used to define the scene.

Usage
  • It must be a direct child of <pc-app>.

Attributes​

AttributeTypeDefaultDescription
fogEnum"none"Fog type: "none" | "linear" | "exp" | "exp2"
fog-colorColor"1 1 1"Fog color as space-separated RGB values, hex code, or named color
fog-densityNumber"0"Fog density for exponential fog types
fog-endNumber"1000"End distance for linear fog
fog-startNumber"0"Start distance for linear fog
gravityVector3"0 -9.81 0"Gravity applied to rigid bodies as "X Y Z" values

Example​

Boxes fading into linear fog. Try a different fog-color (match the camera's clear-color for the classic depth-haze look), or switch fog to "exp" with a fog-density of 0.15:

Live Example
<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 Interface​

You can programmatically create and manipulate <pc-scene> elements using the SceneElement API.