engine/docs/en/core/component.md

order, title, type, label

order	title	type	label
4	Components	Core	Core

In the Galacean engine, Entity does not have actual functionalities such as rendering models. These functionalities are implemented by loading Component component classes. For example, if you want to turn an Entity into a camera, you just need to add the camera component Camera to that Entity. This component-based functionality extension method focuses on encapsulating the program independently according to functionality, and combining and adding as needed during use, which is very beneficial for reducing program coupling and improving code reusability.

Common components:

Name	Description
Camera	Camera
MeshRenderer	Static Model Renderer
SkinnedMeshRenderer	Skinned Model Renderer
Animator	Animation Control Component
DirectLight	Directional Light
PointLight	Point Light
SpotLight	Spotlight
ParticleRenderer	Particle System
BoxCollider	Box Collider
SphereCollider	Sphere Collider
PlaneCollider	Plane Collider
Script	Script

Editor Usage

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 names displayed in the upper 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 is an empty node, you can click the Add Component button to add new components to the current entity.

Script Usage

Adding Components

We use addComponent(Component) to add components, for example, adding a "Direct 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 assets like glTF, we might not know which entity the target component is on. In this case, you can use getComponentsIncludeChildren to search.

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

Getting the Entity of a Component

Continuing with the example of adding a component at the beginning. You can directly get the entity of the component:

const entity = directLight.entity;

State

When temporarily not using a component, you can actively call the component's enabled

directLight.enabled = false;