mirror of
https://github.com/galacean/engine.git
synced 2026-05-17 17:06:07 +08:00
99 lines
4.6 KiB
Plaintext
99 lines
4.6 KiB
Plaintext
---
|
|
order: 4
|
|
title: Components
|
|
type: Core
|
|
label: Core
|
|
---
|
|
|
|
An [Entity](/apis/core/#Entity) does not have actual functionalities such as rendering models. These functionalities are achieved by loading [Component](/apis/core/#Component) classes. For example, if you want an _Entity_ to become a camera, you simply add a camera component [Camera](/apis/core/#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:
|
|
|
|
| Name | Description |
|
|
| :------------------------------------------------- | :--------------- |
|
|
| [Camera](/apis/core/#Camera) | Camera |
|
|
| [MeshRenderer](/apis/core/#MeshRenderer) | Static model renderer |
|
|
| [SkinnedMeshRenderer](/apis/core/#SkinnedMeshRenderer) | Skinned model renderer |
|
|
| [Animator](/apis/core/#Animator) | Animation control component |
|
|
| [DirectLight](/apis/core/#DirectLight) | Directional light |
|
|
| [PointLight](/apis/core/#PointLight) | Point light |
|
|
| [SpotLight](/apis/core/#SpotLight) | Spotlight |
|
|
| [ParticleRenderer](/apis/core/#ParticleRenderer) | Particle system |
|
|
| [BoxCollider](/apis/core/#BoxCollider) | Box collider |
|
|
| [SphereCollider](/apis/core/#SphereCollider) | Sphere collider |
|
|
| [PlaneCollider](/apis/core/#PlaneCollider) | Plane collider |
|
|
| [Script](/apis/core/#Script) | Script |
|
|
|
|
## Using the Editor
|
|
|
|
After selecting an entity from the **[Hierarchy Panel](/en/docs/interface/hierarchy)** 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.
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*tZcpRrrYQcMAAAAAAAAAAAAADsJ_AQ/original" alt="Name" style={{zoom: "50%"}} />
|
|
|
|
You can control whether it is enabled in the inspector.
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QRG8TZ1IorQAAAAAAAAAAAAADsJ_AQ/original" alt="Enable" style={{zoom: "50%"}} />
|
|
|
|
If you don't need it, you can also delete it.
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uqFGQIHyLAwAAAAAAAAAAAAADsJ_AQ/original" alt="Delete" style={{zoom: "50%"}} />
|
|
|
|
Or edit its various properties.
|
|
|
|
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IFnGRYHdi7gAAAAAAAAAAAAADsJ_AQ/original" alt="Edit" style={{zoom: "50%"}} />
|
|
|
|
If it's an empty node, you can click the `Add Component` button to add new components to the current entity.
|
|
|
|
<Image src="https://gw.alipayobjects.com/zos/OasisHub/95d58dde-109f-44b2-89ef-2959ad8b4fe3/image-20230926112713126.png" alt="image-20230926112713126" style={{zoom: "50%"}} />
|
|
|
|
## Using Scripts
|
|
|
|
### Adding a Component
|
|
|
|
We use [addComponent(Component)](/apis/core/#Entity-addComponent) to add components. For example, to add a "parallel light" component ([DirectLight](/apis/core/#DirectLight)) to an `Entity`:
|
|
|
|
```typescript
|
|
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](/apis/core/#Entity-getComponent) API will help you find the target component.
|
|
|
|
```typescript
|
|
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](/apis/core/#Entity-getComponents):
|
|
|
|
```typescript
|
|
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](/apis/core/#Entity-getComponentsIncludeChildren) to search.
|
|
|
|
```typescript
|
|
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:
|
|
|
|
```typescript
|
|
const entity = directLight.entity;
|
|
```
|
|
|
|
### State
|
|
|
|
When you temporarily do not need a component, you can actively call the component's [enabled](/apis/core/#Component-enabled).
|
|
|
|
```typescript
|
|
directLight.enabled = false;
|
|
```
|