<pc-render>

The <pc-render> tag adds a render component that draws a primitive shape — a box, sphere, capsule, cone, cylinder, plane or torus — with a material.

Usage

• It must be a direct child of a <pc-entity>, a <pc-model> or a <pc-node>.

Attributes

Attribute	Type	Default	Description
cast-shadows	Boolean	"true"	Whether the component casts shadows
enabled	Boolean	"true"	Enabled state of the component
material	Material ID	-	id of a <pc-material> to render the primitive with. If omitted, a default material is used
receive-shadows	Boolean	"true"	Whether the component receives shadows
shadow-cascade-mask	String	"0 1 2 3"	Which shadow cascades of directional lights the component casts into, as space-separated cascade indices from 0 (nearest the camera) to 3: "0 1" casts into the two nearest cascades only, and an empty value casts into none. Needs cast-shadows
type	Enum	"box"	Primitive shape to render: "box" | "capsule" | "cone" | "cylinder" | "plane" | "sphere" | "torus"

tip

To render a 3D model from a glTF/GLB file, use <pc-model> instead.

Example

All seven primitive shapes. Try changing any type, or add material once you have defined a <pc-material>:

Live Example

<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 Interface

You can programmatically create and manipulate <pc-render> elements using the RenderComponentElement API.

The component property is the engine RenderComponent the element adds — null until the element is ready — and everything the attributes do not expose is available on it.

See Also

• <pc-material> — the material a primitive is drawn with
• <pc-model> — renders a GLB instead of a primitive
• <pc-light> — lights and shadows the primitive
• <pc-collision> — a matching physics shape

Examples: Basic Shapes, Falling Blocks and Physics Joints.