mirror of
https://github.com/galacean/engine.git
synced 2026-05-07 15:27:19 +08:00
99 lines
4.4 KiB
Plaintext
99 lines
4.4 KiB
Plaintext
---
|
||
order: 4
|
||
title: 组件
|
||
type: 核心
|
||
label: Core
|
||
---
|
||
|
||
[Entity](/apis/core/#Entity) 不具备渲染模型等实际的功能，这些功能是通过加载 [Component](/apis/core/#Component) 组件类来实现的。例如，如果想让一个 _Entity_ 变成一个相机，只需要在该 _Entity_ 上添加相机组件 [Camera](/apis/core/#Camera)。这种基于组件的功能扩展方式注重将程序按照功能独立封装，在使用的时候按照需要组合添加，非常有利于降低程序耦合度并提升代码复用率。
|
||
|
||
常用组件：
|
||
|
||
| 名称 | 描述 |
|
||
| :---------------------------------------------------- | :------------- |
|
||
| [Camera](/apis/core/#Camera) | 相机 |
|
||
| [MeshRenderer](/apis/core/#MeshRenderer) | 静态模型渲染器 |
|
||
| [SkinnedMeshRenderer](/apis/core/#SkinnedMeshRenderer) | 骨骼模型渲染器 |
|
||
| [Animator](/apis/core/#Animator) | 动画控制组件 |
|
||
| [DirectLight](/apis/core/#DirectLight) | 方向光 |
|
||
| [PointLight](/apis/core/#PointLight) | 点光源 |
|
||
| [SpotLight](/apis/core/#SpotLight) | 聚光灯 |
|
||
| [ParticleRenderer](/apis/core/#ParticleRenderer) | 粒子系统 |
|
||
| [BoxCollider](/apis/core/#BoxCollider) | 盒碰撞体 |
|
||
| [SphereCollider](/apis/core/#SphereCollider) | 球碰撞体 |
|
||
| [PlaneCollider](/apis/core/#PlaneCollider) | 平面碰撞体 |
|
||
| [Script](/apis/core/#Script) | 脚本 |
|
||
|
||
## 编辑器使用
|
||
|
||
从 **[层级面板](/docs/interface/hierarchy)** 或场景中选择一个实体后，检查器将显示出当前选中节点挂载的所有组件，组件名显示在左上角
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*tZcpRrrYQcMAAAAAAAAAAAAADsJ_AQ/original" alt="Name" style={{zoom: "50%"}} />
|
||
|
||
你可以在检查器中控制它是否 enabled
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QRG8TZ1IorQAAAAAAAAAAAAADsJ_AQ/original" alt="Enable" style={{zoom: "50%"}} />
|
||
|
||
如果不需要它也可以将它删除
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uqFGQIHyLAwAAAAAAAAAAAAADsJ_AQ/original" alt="Delete" style={{zoom: "50%"}} />
|
||
|
||
或者编辑它的各种属性
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IFnGRYHdi7gAAAAAAAAAAAAADsJ_AQ/original" alt="Edit" style={{zoom: "50%"}} />
|
||
|
||
如果是个空节点，你可以点击 `Add Component` 按钮来为当前实体添加新的组件。
|
||
|
||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/95d58dde-109f-44b2-89ef-2959ad8b4fe3/image-20230926112713126.png" alt="image-20230926112713126" style={{zoom: "50%"}} />
|
||
|
||
## 脚本使用
|
||
|
||
### 添加组件
|
||
|
||
我们使用 [addComponent(Component)](/apis/core/#Entity-addComponent) 添加组件，例如给 `Entity` 添加“平行光”组件（[DirectLight](/apis/core/#DirectLight)）：
|
||
|
||
```typescript
|
||
const lightEntity = rootEntity.createChild("light");
|
||
const directLight = lightEntity.addComponent(DirectLight);
|
||
directLight.color = new Color(0.3, 0.3, 1);
|
||
directLight.intensity = 1;
|
||
```
|
||
|
||
### 查找实体上的组件
|
||
|
||
当我们需要获取某一实体上的组件， [getComponent](/apis/core/#Entity-getComponent) 这个 API 会帮你查找目标组件。
|
||
|
||
```typescript
|
||
const component = newEntity.getComponent(Animator);
|
||
```
|
||
|
||
有些时候可能会有多个同一类型的组件，而上面的方法只会返回第一个找到的组件。如果需要找到所有组件可以用 [getComponents](/apis/core/#Entity-getComponents)：
|
||
|
||
```typescript
|
||
const components = [];
|
||
newEntity.getComponents(Animator, components);
|
||
```
|
||
|
||
在 glTF 这种资产得到的实体里，我们可能不知道目标组件位于哪个实体，这时可以使用[getComponentsIncludeChildren](/apis/core/#Entity-getComponentsIncludeChildren)进行查找。
|
||
|
||
```typescript
|
||
const components = [];
|
||
newEntity.getComponentsIncludeChildren(Animator, components);
|
||
```
|
||
|
||
### 获得组件所在的实体
|
||
|
||
继续开头添加组件的例子。可以直接获得组件所在的实体：
|
||
|
||
```typescript
|
||
const entity = directLight.entity;
|
||
```
|
||
|
||
### 状态
|
||
|
||
暂时不使用某组件时，可以主动调用组件的 [enabled](/apis/core/#Component-enabled)
|
||
|
||
```typescript
|
||
directLight.enabled = false;
|
||
```
|