Components

An Entity does not have actual functionalities such as rendering models. These functionalities are achieved by loading Component classes. For example, if you want an Entity to become a camera, you simply add a camera component Camera to the Entity. This component-based extension approach focuses on encapsulating functionalities independently and combining them as needed, which is very beneficial for reducing program coupling and enhancing code reusability.

Common Components:

Using the Editor

After selecting an entity from the Hierarchy Panel or the scene, the inspector will display all the components mounted on the currently selected node, with the component name displayed in the top left corner.

You can control whether it is enabled in the inspector.

If you don't need it, you can also delete it.

Or edit its various properties.

If it's an empty node, you can click the Add Component button to add new components to the current entity.

Using Scripts

Adding a Component

We use addComponent(Component) to add components. For example, to add a "parallel light" component (DirectLight) to an Entity:

const lightEntity = rootEntity.createChild("light");
const directLight = lightEntity.addComponent(DirectLight);
directLight.color = new Color(0.3, 0.3, 1);
directLight.intensity = 1;

Finding Components on an Entity

When we need to get a component on an entity, the getComponent API will help you find the target component.

const component = newEntity.getComponent(Animator);

Sometimes there may be multiple components of the same type, and the above method will only return the first found component. If you need to find all components, you can use getComponents:

const components = [];
newEntity.getComponents(Animator, components);

In entities obtained from assets like glTF, we might not know which entity contains the target component. In this case, you can use getComponentsIncludeChildren to search.

const components = [];
newEntity.getComponentsIncludeChildren(Animator, components);

Obtaining the Entity of a Component

Continuing from the example of adding a component at the beginning, you can directly obtain the entity of a component:

const entity = directLight.entity;

State

When you temporarily do not need a component, you can actively call the component's enabled.

directLight.enabled = false;