<pc-entity>

The <pc-entity> tag is used to define an entity.

Usage

• It must be a direct child of <pc-scene>, another <pc-entity>, or a <pc-node> — which parents it under a node inside a loaded model.
• It can have 0..n <pc-entity> or <pc-model> children.
• It can optionally have one of each component type as children: <pc-button>, <pc-camera>, <pc-collision>, <pc-element>, <pc-gsplat>, <pc-layout-child>, <pc-layout-group>, <pc-light>, <pc-audio-listener>, <pc-particle-system>, <pc-render>, <pc-rigid-body>, <pc-screen>, <pc-script>, <pc-scrollbar>, <pc-scroll-view>, <pc-sound>.

Attributes

Attribute	Type	Default	Description
enabled	Boolean	"true"	Enabled state of the entity
name	String	-	Name identifier for the entity
position	Vector3	"0 0 0"	Local-space position as "X Y Z" values
rotation	Vector3	"0 0 0"	Local-space rotation as "X Y Z" Euler angles in degrees
scale	Vector3	"1 1 1"	Local-space scale as "X Y Z" values
tags	String	-	Comma-separated list of tags

Events

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

Event	Description
pointerdown	Fired when a pointer is pressed down on the entity.
pointerenter	Fired when a pointer enters the entity.
pointerleave	Fired when a pointer leaves the entity.
pointermove	Fired when a pointer is moved over the entity.
pointerup	Fired when a pointer is released from the entity.

You can also handle these events declaratively with inline onpointer* attributes. These are standard inline event handlers, compiled and run by the browser itself, so they behave exactly like onclick on any HTML element: setting the attribute (even at runtime) replaces the previous handler, removing it removes the handler, and within the handler this is the <pc-entity> element and event is the dispatched event.

<pc-entity name="cube"
           onpointerenter="this.entity.script.tweener.play(0)"
           onpointerleave="this.entity.script.tweener.play(1)"
           onpointerdown="this.entity.script.tweener.play(2)">
    <pc-render type="box"></pc-render>
</pc-entity>

Example

Entity transforms compose down the hierarchy: the small cube is a child of the large one, so hover over the large cube and both move together. Try editing the parent's rotation or scale, or the inline onpointer* handlers:

Live Example

<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 1 4">
            <pc-camera clear-color="#1d1f2b"></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 30 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="parent" rotation="0 30 0" tags="interactive"
                   onpointerenter="this.entity.setLocalPosition(0, 0.25, 0)"
                   onpointerleave="this.entity.setLocalPosition(0, 0, 0)">
            <pc-render type="box"></pc-render>
            <pc-entity name="child" position="0.75 0.75 0" scale="0.5 0.5 0.5">
                <pc-render type="box"></pc-render>
            </pc-entity>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScript Interface

You can programmatically create and manipulate <pc-entity> elements using the EntityElement API.