mirror of
https://github.com/galacean/engine.git
synced 2026-06-06 13:47:54 +08:00
feat: udpate doc (#2289)
This commit is contained in:
AZhan
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"quick-start": {
|
||||
"title": "快速开始",
|
||||
"basics": {
|
||||
"title": "基础",
|
||||
"theme": {
|
||||
"collapse": true
|
||||
}
|
||||
|
||||
@@ -92,246 +92,4 @@ npm run build
|
||||
|
||||
## 小程序项目
|
||||
|
||||
目前 Galacean 已经适配到支付宝和淘宝小程序。本教程默认开发者已经具备一定的小程序开发能力，如果没有，请阅读下面教程，下载小程序开发工具及申请 AppId：
|
||||
|
||||
- [支付宝小程序](https://opendocs.alipay.com/mini/developer)
|
||||
- [淘宝小程序](https://miniapp.open.taobao.com/docV3.htm?docId=119114&docType=1&tag=dev)
|
||||
|
||||
小程序项目发布:
|
||||
|
||||
- [支付宝小程序发布](https://opendocs.alipay.com/mini/introduce/release)
|
||||
- [淘宝小程序发布](https://developer.alibaba.com/docs/doc.htm?spm=a219a.7629140.0.0.258775fexQgSFj&treeId=635&articleId=117321&docType=1)
|
||||
|
||||
### 项目导出
|
||||
|
||||
Galacean 编辑器导出支付宝小程序的功能仍在开发中，交互方式和模板工程后续可能会有改动。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/rms/afts/img/A*ZIXuR7Bj5gEAAAAAAAAAAAAAARQnAQ/original/image-20231008163057689.png" alt="image-20231008163057689" style="zoom:50%;" />
|
||||
|
||||
### 项目启动
|
||||
|
||||
点击下载后会下载一个 zip 文件，解压文件目录结构如下：
|
||||
|
||||
```shell
|
||||
.
|
||||
├── mini # 📁 小程序执行目录
|
||||
│ ├── dist # 📁 代码构建结果
|
||||
│ ├── pages # 📁 小程序页面
|
||||
│ ├── app.json # ⚙️ 项目配置文件
|
||||
│ ├── app.js # 代码入口
|
||||
├── public # 📁 公共资源目录
|
||||
│ ├── scene.json # 场景文件
|
||||
│ └── ... # 其他
|
||||
├── src # 📁 源代码目录
|
||||
├── mini.project.json # ⚙️ 工程配置文件
|
||||
├── project.json # ⚙️ 编辑器导出工程配置
|
||||
└── ... # 其他
|
||||
```
|
||||
|
||||
接下来就可以安装依赖和启动项目：
|
||||
|
||||
```shell
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
用小程序 IDE 打开可以看到：
|
||||
|
||||
|
||||
|
||||
### 本地资源处理
|
||||
|
||||
#### 蚂蚁集团内部用户
|
||||
|
||||
直接使用『上传到 CDN 』即可（在导出面板选项中，参考上图），使用集团默认 CDN 即可。若想使用自定义 CDN，参考非蚂蚁集团内部用户。
|
||||
|
||||
#### 非蚂蚁集团内部用户
|
||||
|
||||
1. public 文件请自行上传 CDN
|
||||
2. 修改 scene.json 文件或配置 baseUrl
|
||||
|
||||
### 包内文件加载（WIP）
|
||||
|
||||
目前还没有支持小程序的本地文件加载。
|
||||
|
||||
### 已知问题
|
||||
|
||||
- 小程序不支持 WebAssembly，目前无法使用 PhysX 作为物理后端
|
||||
- 目前不支持本地文件加载，需要手动上传到 CDN
|
||||
|
||||
## 注意事项
|
||||
|
||||
在使用编辑器项目导出功能时，你需要注意以下事项：
|
||||
|
||||
1. 导出的项目需要在支持 WebGL 的环境中运行。
|
||||
2. 导出的项目中可能包含大量的资源文件，你需要对项目进行优化和压缩，以提高项目的性能和加载速度。
|
||||
3. 导出的项目中可能包含敏感信息和数据，你需要对项目进行安全性评估和保护，以防止信息泄漏和数据丢失等情况。
|
||||
|
||||
---
|
||||
|
||||
## 小程序的补充说明
|
||||
|
||||
### 小程序项目使用 OrbitControl
|
||||
|
||||
1. 引入二方库
|
||||
|
||||
```bash
|
||||
npm install @galacean/engine-toolkit-controls -S
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { OrbitControl } from "@galacean/engine-toolkit-controls/dist/miniprogram";
|
||||
```
|
||||
|
||||
2. 添加组件
|
||||
|
||||
`OrbitControl` 组件需要添加到相机节点上。
|
||||
|
||||
```typescript
|
||||
cameraEntity.addComponent(OrbitControl);
|
||||
```
|
||||
|
||||
3. 事件模拟派发
|
||||
|
||||
因为小程序不支持 `addEventListener` 添加监听事件，得手动添加事件的模拟，并且小程序的 canvas 的多指触控存在 bug，所以添加一个和 canvas 大小和位置一样的 view 层去派发触摸事件：
|
||||
|
||||
```html
|
||||
<view>
|
||||
<canvas
|
||||
onReady="onCanvasReady"
|
||||
style="width:{{cw}}px;height:{{ch}}px"
|
||||
type="webgl">
|
||||
</canvas>
|
||||
<view
|
||||
style="width:{{cw}}px;height:{{ch}}px;top:0px;position:absolute;"
|
||||
onTouchCancel="onTouchCancel"
|
||||
onTouchStart="onTouchStart"
|
||||
onTouchMove="onTouchMove"
|
||||
onTouchEnd="onTouchEnd"
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { dispatchPointerUp, dispatchPointerDown, dispatchPointerMove, dispatchPointerLeave, dispatchPointerCancel } from "@galacean/engine-miniprogram-adapter";
|
||||
|
||||
Page({
|
||||
...
|
||||
onTouchEnd(e) {
|
||||
dispatchPointerUp(e);
|
||||
dispatchPointerLeave(e);
|
||||
},
|
||||
onTouchStart(e) {
|
||||
dispatchPointerDown(e);
|
||||
},
|
||||
onTouchMove(e) {
|
||||
dispatchPointerMove(e);
|
||||
},
|
||||
onTouchCancel(e) {
|
||||
dispatchPointerCancel(e);
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Pro code 创建 Galacean 小程序项目
|
||||
|
||||
> 需要 Node.js 版本 >=12.0.0.
|
||||
|
||||
使用 yarn 创建
|
||||
|
||||
```bash
|
||||
yarn create @galacean/galacean-app --template miniprogram
|
||||
```
|
||||
|
||||
使用 npm **6.x** 版本创建
|
||||
|
||||
```
|
||||
npm init @galacean/galacean-app --template miniprogram
|
||||
```
|
||||
|
||||
使用 npm **7.x** 版本创建
|
||||
|
||||
```she
|
||||
npm init @galacean/galacean-app -- --template miniprogram
|
||||
```
|
||||
|
||||
**根据提示**完成后续步骤后，可以使用小程序开发工具打开项目：
|
||||
|
||||
|
||||
|
||||
选择对应目录即可，顺利的话可以看到：
|
||||
|
||||
|
||||
|
||||
### 已有项目 Pro code 使用 Galacean
|
||||
|
||||
本教程假设你已经有一定开发能力，若不熟悉小程序开发，请详细阅读[小程序开发文档](https://opendocs.alipay.com/mini/developer)。
|
||||
|
||||
1. 在项目目录中打开 `Terminal`，安装依赖：
|
||||
|
||||
```bash
|
||||
# 使用 npm
|
||||
npm install @galacean/engine --save
|
||||
npm install @galacean/engine-miniprogram-adapter --save
|
||||
# 使用 yarn
|
||||
yarn add @galacean/engine
|
||||
yarn add @galacean/engine-miniprogram-adapter
|
||||
```
|
||||
|
||||
2. 在小程序项目配置文件 `app.json` 里添加下面配置项：
|
||||
|
||||
```json
|
||||
{
|
||||
...
|
||||
"window": {
|
||||
...
|
||||
"v8WorkerPlugins": "gcanvas_runtime",
|
||||
"v8Worker": 1,
|
||||
"enableSkia": "true"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. 在需要添加互动的 axml 页面里加入 canvas 标签
|
||||
|
||||
```html
|
||||
<canvas onReady="onCanvasReady" id="canvas" type="webgl" />
|
||||
```
|
||||
|
||||
使用 `onReady` 配置 `canvas` 初始化回调。需要设置 `canvas` 的 id，后面会用到。
|
||||
|
||||
4. 在页面的 `.js` 代码文件里添加回调函数，使用 `my._createCanvas` 创建所需的 canvas 上下文，之后在 `success` 回调里使用 galacean 即可.
|
||||
|
||||
注意：
|
||||
|
||||
1. 使用 `import * as GALACEAN from "@galacean/engine/dist/miniprogram"` 引入小程序依赖。
|
||||
2. 需要使用『@galacean/engine-miniprogram-adapter』里的 `registerCanvas` 注册 `canvas`。
|
||||
|
||||
详情可以参考下面代码：
|
||||
|
||||
```js
|
||||
import * as GALACEAN from "@galacean/engine/dist/miniprogram";
|
||||
import { registerCanvas } from "@galacean/engine-miniprogram-adapter";
|
||||
|
||||
Page({
|
||||
onCanvasReady() {
|
||||
my._createCanvas({
|
||||
id: "canvas",
|
||||
success: (canvas) => {
|
||||
// 注册 canvas
|
||||
registerCanvas(canvas);
|
||||
// 适配 canvas 大小
|
||||
const info = my.getSystemInfoSync();
|
||||
const { windowWidth, windowHeight, pixelRatio, titleBarHeight } = info;
|
||||
canvas.width = windowWidth * pixelRatio;
|
||||
canvas.height = (windowHeight - titleBarHeight) * pixelRatio;
|
||||
|
||||
// 创建引擎
|
||||
const engine = new GALACEAN.WebGLEngine(canvas);
|
||||
// 剩余代码和 Galacean Web 版本一致
|
||||
...
|
||||
},
|
||||
});
|
||||
}
|
||||
})
|
||||
```
|
||||
请参照 [小程序项目](/docs/miniProgram/miniProgame/)
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
order: 0
|
||||
title: 概述
|
||||
type: 基础知识
|
||||
label: Basics
|
||||
---
|
||||
|
||||
@@ -76,7 +75,7 @@ import { WebGLEngine, Camera } from "@galacean/engine";
|
||||
|
||||
> 二方生态包的版本依赖关系，请参照对应文档说明。
|
||||
|
||||
> [点击深入了解 Galacean 的版本管理](/docs/quick-start/version/)
|
||||
> [点击深入了解 Galacean 的版本管理](/docs/basics/version/)
|
||||
|
||||
## 兼容性
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
order: 2
|
||||
title: 像素小鸟
|
||||
type: 基础知识
|
||||
group: 快速上手
|
||||
label: Basics/GettingStarted
|
||||
label: Basics
|
||||
---
|
||||
|
||||
> 相信大家对 Flappy Bird 都不陌生，本文简单描述下如何用 Galacean 复刻这个 2D 游戏。
|
||||
101
docs/zh/basics/quickStart/quick-start.md
Normal file
101
docs/zh/basics/quickStart/quick-start.md
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
order: 1
|
||||
title: 快速开始
|
||||
label: Basics
|
||||
---
|
||||
|
||||
我们通过一个“旋转的小鸭子”的例子，来了解一下引擎的使用。
|
||||
|
||||
## 创建项目
|
||||
|
||||
在你登录之后，首先看到的是编辑器的首页，在这个页面中会显示所有你创建的项目。使用右上角的按钮来创建项目，点击后可以选择要创建的项目类型，2D 或 3D。我们选择 3D Project。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*luxKRKYGSBMAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161225962" style="zoom:50%;" />
|
||||
|
||||
此时会打开一个新的空白工程，场景中内置了一个相机和一个平行光。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/92b9b53e-63df-4165-bb53-d130bde7a731/image-20240705161613717.png" alt="image-20240705161613717" style="zoom:50%;" />
|
||||
|
||||
## 搭建场景
|
||||
|
||||
在此之前先解释一下游戏引擎中的基本概念：
|
||||
|
||||
| 概念 | 解释 |
|
||||
| -------- | ------------------------------------------------------------ |
|
||||
| 场景 | 一个包含所有2D/3D元素的环境 |
|
||||
| 实体 | 构成场景的基本单位，代表场景中的任何一个具有独立存在意义的对象 |
|
||||
| 组件 | 是实体功能的具体实现，每个组件都负责处理实体的一个具体功能 |
|
||||
| 脚本组件 | 是一种特殊类型的组件，它为实体赋予动态行为和逻辑控制能力 |
|
||||
| 资产 | 用于构建场景的可重用资源的总称，比如 3D 模型、材质等 |
|
||||
| 3D模型 | 指通过计算机软件创建的，能够在三维空间中表示物体形状和外观的数字化表现形式。包括角色、环境物件（如建筑、植被）、道具（武器、家具）等的三维几何形状，通常带有纹理和材质定义 |
|
||||
|
||||
### 放入鸭子
|
||||
|
||||
首先，点击这个[链接](https://gw.alipayobjects.com/os/bmw-prod/6cb8f543-285c-491a-8cfd-57a1160dc9ab.glb)下载一个鸭子的 3D 模型。把下载到本地的模型拖到资产面板中，稍过片刻就会看到模型已经上传到了编辑器中：
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/a73635d5-9f6f-4dc0-aa32-af8d49b669a6/image-20240705162025015.png" alt="image-20240705162025015" style="zoom:50%;" />
|
||||
|
||||
接着，把资产面板中的模型拖到场景视图中，就可以在场景中渲染这个 3D 模型了，此时场景的节点树中就增加了一个新的实体。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/cfbdb410-9091-4246-a9ba-1cf06cd4fb93/image-20240705162359455.png" alt="image-20240705162359455" style="zoom:50%;" />
|
||||
|
||||
### 调整鸭子的变换
|
||||
|
||||
首先，为了更好地预览最后在移动设备上的效果，我们可以选中**相机**实体，并且通过选择不同尺寸的移动设备来模拟真机预览，我们也可以选择锁定预览窗口，这样在选择其他实体的时候预览窗口就不会消失。
|
||||
|
||||
<img src="/Users/xuqianwei/Library/Application Support/typora-user-images/image-20240705162931132.png" alt="image-20240705162931132" style="zoom:50%;" />
|
||||
|
||||
接着，我们选中鸭子，通过选择上方工具栏中的**移动**、**旋转**、**缩放**等[变换](/docs/core/transform)操作。切换不同的变换类型，鸭子身上也会随之切换不同的操作手柄。这些操作手柄和大部分 3D 软件的交互是类似的，如果你是第一次使用这类手柄，请不用担心，把鼠标移到手柄上，随意摆弄一下，就能很快上手。通过简单的变换操作，我们就能把鸭子的位置、角度、大小都调整到符合我们预期的效果。左上角的相机预览器会实时地展示你调整的效果。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/4f2955d5-41e8-4cc3-81ef-5f1fee6a8b59/image-20240705163544657.png" alt="image-20240705163544657" style="zoom:50%;" />
|
||||
|
||||
### 调整灯光
|
||||
|
||||
此时鸭子有点暗，我们选中节点树上的 `DirectLight` 灯光实体，在右侧的面板中拖动滑杆适当调整一下灯管的强度，让场景的照明更加亮一点。
|
||||
|
||||
<img src="/Users/xuqianwei/Library/Application Support/typora-user-images/image-20240705164814972.png" alt="image-20240705164814972" style="zoom:50%;" />
|
||||
|
||||
|
||||
|
||||
### 让小鸭子转起来
|
||||
|
||||
首先，我们在资产面板 中 *右键 → Create → New Empty Script* 创建一个 Script 资产。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/e47a9c4e-bfd8-481d-8233-a7daae00f500/image-20240705170003841.png" alt="image-20240705170003841" style="zoom:50%;" />
|
||||
|
||||
创建完成之后，可以看到资产面板中多了一个 Script 资产。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/690d8428-2295-4c07-bfb0-6bdace57cd03/image-20240705170256694.png" alt="image-20240705170256694" style="zoom:50%;" />
|
||||
|
||||
接着，我们选中鸭子实体，在右侧的检查器面板中点击 **Add Component** 添加一个 [ Script ](/docs/script/class) 组件。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/c8879990-82c2-4ebd-a8c4-028fcecea364/image-20240705165619069.png" alt="image-20240705165619069" style="zoom:50%;" />
|
||||
|
||||
点击 **Select asset** 选择刚创建的 Script，这样脚本就绑定到该实体上了，也就是说脚本的生命周期函数会作用到该实体上。
|
||||
|
||||
<img src="/Users/xuqianwei/Library/Application Support/typora-user-images/image-20240705170349805.png" alt="image-20240705170349805" style="zoom:50%;" />
|
||||
|
||||
创建脚本后，我们可以 **双击它** 来跳转到代码编辑器页面。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/73374e9e-77f2-46dd-baed-da79b8601dfa/image-20240705170853613.png" alt="image-20240705170853613" style="zoom:50%;" />
|
||||
|
||||
进入代码编辑器后，我们在 `onUpdate` 函数中加一行代码，让鸭子沿着 Y 轴旋转。写好代码后，保存（`⌘+s`）, 右侧预览区就可以实时的看到整个场景的效果。
|
||||
|
||||
```ts
|
||||
// Script.ts
|
||||
import { Script } from "@galacean/engine";
|
||||
|
||||
export default class extends Script {
|
||||
onUpdate(deltaTime: number) {
|
||||
this.entity.transform.rotate(0, 1, 0);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 导出项目
|
||||
|
||||
我们已经完成了在编辑器中的开发工作，接下来我们来导出这个项目到本地。点击左侧工具栏的 **下载** 按钮，会唤起导出界面，我们这里把项目名改为 “duck”，然后点击 `Download` 按钮，编辑器就会把项目打包为一个 `duck.zip` 文件下载。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/26a6e282-689a-4c69-903f-10c565a9746c/image-20240705171230958.png" alt="image-20240705171230958" style="zoom:50%;" />
|
||||
|
||||
项目打包完成后，我们使用 VsCode 打开 box 项目，运行 `npm install` & `npm run dev` ，可以看到项目已经能够正常运行了。
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
order: 0
|
||||
title: 版本管理
|
||||
type: 基础知识
|
||||
label: Basics
|
||||
---
|
||||
|
||||
@@ -23,7 +23,7 @@ Galacean Engine 封装了不同平台的画布，如 [WebCanvas](${api}rhi-webgl
|
||||
|
||||
> 开发者要注意检查 canvas 的高度和宽度，避免出现高度或宽度的值为 **0** 导致渲染不出来。
|
||||
|
||||
创建 WebGLEngine 实例的时候会自动创建一个 WebCanvas 实例：
|
||||
创建 WebGLEngine 实例的时候会自动创建一个 WebCanvas 实例。其中，参数 `canvas` 是 _Canvas_ 元素的 `id`。
|
||||
|
||||
```typescript
|
||||
const engine = await WebGLEngine.create({ canvas: "canvas" });
|
||||
|
||||
@@ -25,7 +25,7 @@ label: Core
|
||||
const engine = await WebGLEngine.create({ canvas: "canvas" });
|
||||
```
|
||||
|
||||
`WebGLEngine.create` 不仅承担着实例化引擎的职责，还负责渲染上下文的配置和某些子系统的初始化，下方是创建引擎时传入配置的类型说明：
|
||||
`WebGLEngine` 支持 WebGL1.0 和 WebGL2.0，它能够控制画布的一切行为，此外还有资源管理、场景管理、执行/暂停/继续、垂直同步等功能。`WebGLEngine.create` 。下方是创建引擎时传入配置的类型说明：
|
||||
|
||||
```mermaid
|
||||
---
|
||||
|
||||
@@ -5,7 +5,7 @@ type: 核心
|
||||
label: Core
|
||||
---
|
||||
|
||||
在一个渲染场景中，我们经常会对物体进行平移、旋转、缩放等操作（这些操作我们统一称为 [变换](/docs/core/transform) ），从而达到我们想要的互动效果。而这些变换的计算，我们一般都是通过向量、四元数、矩阵等来实现的，为此我们提供一个数学库来完成 *向量* 、*四元数* 、*矩阵* 等相关运算。除此之外，数学库还提供了更为丰富的类来帮助我们描述空间中的 *点* *线* *面* *几何体*，以及判断它们在三维空间中的相交、位置关系等。
|
||||
在一个渲染场景中，我们经常会对物体进行平移、旋转、缩放等操作（这些操作我们统一称为 [变换](/docs/core/transform) ），从而达到我们想要的互动效果。而这些变换的计算，我们一般都是通过向量、四元数、矩阵等来实现的，为此我们提供一个数学库来完成 *向量* 、*四元数* 、*矩阵* 等相关运算。除此之外，数学库还提供了更为丰富的类来帮助我们描述空间中的 *点* *线* *面* *几何体*，以及判断它们在三维空间中的相交、位置关系，甚至也可以描述颜色值。
|
||||
|
||||
|
||||
| 类型 | 解释 |
|
||||
|
||||
@@ -6,7 +6,7 @@ group: 相机
|
||||
label: Graphics/Camera
|
||||
---
|
||||
|
||||
相机是一个图形引擎对 [3D 投影](https://en.wikipedia.org/wiki/3D_projection)的抽象概念，作用好比现实世界中的摄像机或眼睛。Galacean 的相机实现了自动视锥剔除，只渲染视锥体内的物体。
|
||||
相机是一个图形引擎对 [3D 投影](https://en.wikipedia.org/wiki/3D_projection)的抽象概念，作用好比现实世界中的摄像机或眼睛。如果不加相机，画布将什么都画不出来。Galacean 的相机实现了自动视锥剔除，只渲染视锥体内的物体。
|
||||
|
||||
## 相机的类型
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ group: 网格
|
||||
label: Graphics/Mesh
|
||||
---
|
||||
|
||||
常用几何体统一在 [PrimitiveMesh](/apis/core/#PrimitiveMesh) 中提供。
|
||||
[PrimitiveMesh](/apis/core/#PrimitiveMesh)提供了创建立方体、球体等网格对象的便捷方法。
|
||||
|
||||
## 编辑器使用
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ group: 渲染器
|
||||
label: Graphics/Renderer
|
||||
---
|
||||
|
||||
[MeshRenderer](/apis/core/#MeshRenderer) 是网格渲染组件，当一个实体挂载了网格渲染组件，只需设置它的 `mesh` 与 `material`即可渲染物体。
|
||||
[MeshRenderer](/apis/core/#MeshRenderer) 是网格渲染器组件， 使用网格对象（如立方体）作为几何体轮廓的数据源。当一个实体挂载了网格渲染组件，只需设置它的 `mesh` 与 `material` 即可渲染物体。
|
||||
|
||||
<playground src="scene-basic.ts"></playground>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Blinn Phong
|
||||
---
|
||||
|
||||
[BlinnPhongMaterial](/apis/core/#BlinnPhongMaterial) 虽然不是基于物理渲染，但是其高效的渲染算法和基本齐全的光学部分，流传至今仍可以适用很多的场景。
|
||||
[BlinnPhongMaterial](/apis/core/#BlinnPhongMaterial) 材质是经典的材质之一，虽然不是基于物理渲染，但是其高效的渲染算法和基本齐全的光学部分，流传至今仍可以适用很多的场景。
|
||||
|
||||
<playground src="blinn-phong.ts"></playground>
|
||||
|
||||
|
||||
70
docs/zh/interface/inspector.md
Normal file
70
docs/zh/interface/inspector.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
order: 4
|
||||
title: 检查器面板
|
||||
type: 基础知识
|
||||
group: 界面
|
||||
label: Basics/Interface
|
||||
---
|
||||
|
||||
检查器面板位于编辑器右侧，它会是你在使用编辑器的过程中最常用的面板。基于你当前选择所选择的东西，检查器面板会显示出相对应的属性。你可以使用检查器面板来编辑场景中几乎所有的事物，如场景、实体、资产等。
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*NWWWTp5Le1cAAAAAAAAAAAAADqiTAQ/original" />
|
||||
|
||||
## 检查器类型
|
||||
|
||||
### 场景检查器
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/6429cce7-8fe4-4c12-bd41-1911f53acc5d/image-20240709111320128.png" />
|
||||
|
||||
场景位于层级树的最顶层，点击选中场景，可以看到检查器中提供了包含环境光、背景、阴影、雾等场景相关的效果调整。这些元素的详细参数如何编辑请看[场景](/docs/core/scene)。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/cfdc7905-7a4f-47bb-aa77-3f3866486cee/image-20240709141658903.png" />
|
||||
|
||||
### 实体检查器
|
||||
|
||||
实体检查器是最常用的检查器，它的属性包含了当前实体的组件列表。你可以很方便地修改某个组件的属性，也可以通过 **Add Component** 按钮方便地添加任何引擎内置的组件和自定义的脚本组件。实体检查器也包含当前实体的基本信息，比如 `Transform`、`Layer` 等。详见[实体](/engine/docs/core/entity)。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/bb8e0881-c716-4fc2-89c0-d7b4b01d668d/image-20240318175043180.png" />
|
||||
|
||||
### 资产检查器
|
||||
|
||||
在资产面板中选中某个资产后，检查器就会显示当前资产的各个属性，并且提供了一个预览器实时展示编辑的结果。下图是一个材质资产的检查器截图。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/1ce2c623-bab4-45dd-a0ef-12ab2e00e9a9/image-20240318175341251.png" />
|
||||
|
||||
## 检查器控件的使用
|
||||
|
||||
检查器控件可以分成两大类：
|
||||
|
||||
- **基本数值类型**：数字调节、颜色选择、属性切换等
|
||||
- **引用类型**：通常是资源，比如材质选择、纹理选择等
|
||||
|
||||
### 数字调节控件
|
||||
|
||||
检查器中提供了很多数字调节的入口。针对不同的属性，数字可调节的范围，每次调整的大小都会不同。最典型的是调整 `Transform` 组件的位置、旋转、缩放属性值。
|
||||
|
||||
你可以通过拖拽输入框右侧的滑块来快速调整数字的大小。在拖拽时，按住 <Kbd>⌘</Kbd>（window 上为 <Kbd>Ctrl</Kbd>）可以更精确地调整数字的大小（精度为原 step 的 1/10）。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/b14cd188-22bf-4d78-b327-07a331f3c58b/image-20240318175444343.png" />
|
||||
|
||||
一些可以调节的属性是以滑动条的形式出现的。你可以拖动滑块来快速调整数字的大小，如灯光的 `Intensity`。同样的，在拖动滑块时，按住 `⌘`（window 上为 `ctrl`）可以更精确的调整数字的大小。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/440cd2ed-d1eb-474f-be7e-7a35cac8c954/image-20240318175518354.png" />
|
||||
|
||||
还有一些数字调节的属性是以输入框和按钮的形式出现的，如阴影的 `Near Plane`。这些属性往往拥有更精确的步进大小（如 0.1, 1, 10）。点击按钮可以直接以步进长度来增加或减小数值。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/14c8726c-1a91-4206-8e73-93d436109172/image-20240318175638055.png" />
|
||||
|
||||
### 颜色选择控件
|
||||
|
||||
一些属性需要调整颜色，如光照、场景的背景色，亦或者材质的自发光颜色等。想要调整颜色，你需要点击左侧的颜色按钮来唤起颜色选择器。在颜色选择器中，你可以使用 HUE 来选择颜色，调整颜色的透明度；也可以在输入框来调整颜色具体的 RGBA 数值。点击 <Image src="https://gw.alipayobjects.com/zos/OasisHub/dc030a4b-8813-4ea2-acb0-549c04363b1d/image-20230926110451443.png" />按钮可以在 HSLA，RGBA 和 HEXA 三种模式下进行切换。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/d340d0ea-a88a-4b82-b6c4-c69d3f4b8c4e/image-20240318175748734.png" />
|
||||
|
||||
### 资产选择控件
|
||||
|
||||
一些属性需要引用到需要的资产，在这种情况下，你可以点击资产选择器的输入框来唤起资产选择器。不同的属性需要的资产类型不同，但资产选择器已经默认配置好了相应的过滤器，直接选择即可。
|
||||
|
||||
资产选择器中还提供了一个搜索框，你可以使用它来更精确的找到对应的资产。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/b8463854-4343-4dea-b1cf-713a7c617288/image-20240318175957149.png" />
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
order: 5
|
||||
title: 检查器面板
|
||||
type: 基础知识
|
||||
group: 界面
|
||||
label: Basics/Interface
|
||||
---
|
||||
|
||||
检查器面板位于编辑器右侧，它会是你在使用编辑器的过程中最常用的面板。基于你的当前选择，检查器面板会显示出相对应的属性。你可以使用检查器面板来编辑场景中几乎所有类型的属性，如场景、实体、组件、资产等等。
|
||||
|
||||
<Image src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*NWWWTp5Le1cAAAAAAAAAAAAADqiTAQ/original" />
|
||||
|
||||
## 实体属性
|
||||
|
||||
和引擎一样，编辑器为每个实体自动挂载了 Transform 组件，你可以直接在检查器面板中编辑实体的位置、旋转、缩放属性。
|
||||
|
||||
此外，针对 `rotation` 属性，编辑器提供了 lookAt 功能，你可以点击 rotation 右侧的按钮来快速设置实体的旋转，使其快速朝向某个目标；对于 `scale` 属性，你可以点击右侧的 constrain 按钮来锁定缩放比例，使其在 X、Y、Z 三个方向上保持一致。
|
||||
|
||||
## 属性类型
|
||||
|
||||
检查器面板中的属性可以分成两大类：
|
||||
|
||||
- **基本数值类型**：数字调节、颜色选择、属性切换等
|
||||
- **引用类型**：通常是资源，比如材质选择、纹理选择；也有可能是其他实体，比如父节点选择、子节点选择
|
||||
|
||||
### 数字调节
|
||||
|
||||
检查器中提供了很多数字调节的入口。针对不同的属性，数字可调节的范围，每次调整的大小都会不同。最典型的是调整 `Transform` 组件的位置、旋转、缩放属性值。
|
||||
|
||||
你可以通过拖拽输入框右侧的滑块来快速调整数字的大小。在拖拽时，按住 <Kbd>⌘</Kbd>（window 上为 <Kbd>Ctrl</Kbd>）可以更精确地调整数字的大小（精度为原 step 的 1/10）。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/b14cd188-22bf-4d78-b327-07a331f3c58b/image-20240318175444343.png" />
|
||||
|
||||
一些可以调节的属性是以滑动条的形式出现的。你可以拖动滑块来快速调整数字的大小，如灯光的 `Intensity`。同样的，在拖动滑块时，按住 <Kbd>⌘</Kbd>（window 上为 <Kbd>Ctrl</Kbd>） 可以更精确的调整数字的大小。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/440cd2ed-d1eb-474f-be7e-7a35cac8c954/image-20240318175518354.png" />
|
||||
|
||||
还有一些数字调节的属性是以输入框和按钮的形式出现的，如阴影的 `Near Plane`。这些属性往往拥有更精确的步进大小（如 0.1, 1, 10）。点击按钮可以直接以步进长度来增加或减小数值。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/14c8726c-1a91-4206-8e73-93d436109172/image-20240318175638055.png" />
|
||||
|
||||
### 颜色面板
|
||||
|
||||
一些属性需要调整颜色，如光照、场景的背景色，亦或者材质的自发光颜色等。想要调整颜色，你需要点击左侧的颜色按钮来唤起颜色选择器。在颜色选择器中，你可以使用 HUE 来选择颜色，调整颜色的透明度；也可以在输入框来调整颜色具体的 RGBA 数值。点击颜色模式按钮可以在 `HSLA`，`RGBA` 和 `HEXA` 三种模式下进行切换。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/d340d0ea-a88a-4b82-b6c4-c69d3f4b8c4e/image-20240318175748734.png" />
|
||||
|
||||
### 资产选择
|
||||
|
||||
一些属性需要引用到需要的资产，在这种情况下，你可以点击资产选择器的输入框来唤起资产选择浮窗。不同的属性需要的资产类型不同，但资产选择器已经默认配置好了相应的过滤器，直接选择即可。
|
||||
|
||||
<Image src="https://gw.alipayobjects.com/zos/OasisHub/b8463854-4343-4dea-b1cf-713a7c617288/image-20240318175957149.png" />
|
||||
@@ -1,205 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title: 核心概念
|
||||
type: 基础知识
|
||||
group: 快速上手
|
||||
label: Basics/GettingStarted
|
||||
---
|
||||
|
||||
我们通过一个立方体的例子，来了解一下编辑器和运行时中的核心概念。
|
||||
|
||||
## 编辑器使用
|
||||
|
||||
### 创建项目
|
||||
|
||||
在你登录之后，首先看到的是编辑器的首页，在这个页面中会显示所有你创建的项目。使用右上角的按钮来创建项目，点击后可以选择要创建的项目类型，2D 或 3D。我们选择 3D Project。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*luxKRKYGSBMAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161225962" style="zoom:50%;" />
|
||||
|
||||
### 创建立方体
|
||||
|
||||
首先，我们在 **层级面板** 中创建一个新的实体（[什么是实体？](https://galacean.antgroup.com/#/docs/latest/cn/entity)）。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*g-zmTr6rD9MAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161422138" style="zoom:50%;" />
|
||||
|
||||
我们用鼠标左键选中新建的实体节点，此时右侧的 **[检查器面板](/docs/interface/inspector)** 会显示出当前实体的一些可配置属性。因为我们的实体现在没有绑定任何组件（[什么是组件？](https://galacean.antgroup.com/#/docs/latest/cn/entity)），所以我们暂时只能调整实体的坐标信息这类的基础属性。
|
||||
|
||||
接下来，我们点击 **[检查器面板](/docs/interface/inspector)** 中的 `Add Component` 按钮唤起组件选单，然后选择添加 `Mesh Renderer` 组件（什么是 [Mesh Renderer?](/docs/graphics-renderer-meshRenderer)）。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*TrArQ7FmXc4AAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161622497" style="zoom:50%;" />
|
||||
|
||||
这样，我们就给当前的实体新增了一个 `Mesh Renderer` 组件。但我们在主编辑区还看不到这个物体。需要为该组件添加 Mesh 和 Material 才行。编辑器会默认为 `Mesh Renderer` 组件添加一个不可编辑的默认材质，我们只需要为组件的 Mesh 属性添加一个 Cuboid Mesh 就可以在场景中看到它了。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*pc_6S5zuGhYAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921161758541" style="zoom:50%;" />
|
||||
|
||||
默认的材质比较简单，所以接下来，我们来创建一个自定义的材质。
|
||||
|
||||
你也可以通过添加实体按钮中的 `3D Object` → `Cuboid` 来快速添加一个立方体模型，它会自动帮你添加一个 `Mesh Renderer` 组件：
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*zlEzSLQ-L9cAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" />
|
||||
|
||||
### 创建材质
|
||||
|
||||
首先，我们来上传纹理。我们可以把这些纹理文件直接拖动到 **资产管理面板，** 既可批量上传这些文件。
|
||||
|
||||
上传后，我们可以在面板中看到这些文件，依次是粗糙度纹理、法线纹理、基础颜色纹理。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/81ad7299-158b-4347-8e67-86b835980a04/image-20230921172453377.png" alt="image-20230921172453377" style="zoom:50%;" />
|
||||
|
||||
我们首先在 **资产管理面板** 中依次选择 `右键` → `Create` → `Material` 让编辑器会创建出一个默认的 PBR 材质。我们选中这个材质，此时 **[检查器面板](/docs/interface/inspector)** 会显示当前材质的配置选项。默认的材质比较简单，我们可以为这个材质增加一些纹理贴图，如基础纹理、粗糙度纹理、法线贴图。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/OasisHub/65bf4b63-3f09-4ad6-abc9-a9d26e173783/image-20230921173056885.png" alt="image-20230921173056885" style="zoom:50%;" />
|
||||
|
||||
接下来，我们把这些贴图配置到材质的对应属性当中。配置后我们再次选择上一步创建的实体节点，将 `Mesh Renderer` 组件的 `Material` 属性修改为我们刚刚创建的自定义材质。一个拥有金属质感的立方体就创建成功了。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*ni3KQ7jGK-0AAAAAAAAAAAAADqiTAQ/original" alt="Untitled" style="zoom:50%;" />
|
||||
|
||||
只不过，立方体现在看上去有点暗，需要把场景中的 [灯光](https://galacean.antgroup.com/#/docs/latest/cn/light) 调亮一点。我们在节点树中选择 `DirectLight` 节点，然后在检查器中调高 `Intensity`（光强度）属性。
|
||||
|
||||
现在看上去就比较正常了。
|
||||
<img src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*n151R6vZ59oAAAAAAAAAAAAADqiTAQ/original" alt="Untitled" style="zoom:50%;" />
|
||||
|
||||
### 创建脚本
|
||||
|
||||
接下来，我们为这个节点再绑定一个 `Script` 组件（[什么是 Script 组件?](https://galacean.antgroup.com/#/docs/latest/cn/script)）。
|
||||
|
||||
1. 我们继续使用上述方式在 **[检查器面板](/docs/interface/inspector)** 中添加 `Script` 组件
|
||||
2. 接下来，我们在 **[资产面板](/docs/assets-interface)** 中 `右键` → `Create` → `Script` 创建一个 `Script` 资产
|
||||
3. 最后，在 **[检查器面板](/docs/interface/inspector)** 中将刚创建的脚本文件绑定到脚本组件上
|
||||
|
||||
> ⚠️ 注意，如果你没有把脚本资产绑定到实体的脚本组件上，则脚本不会运行
|
||||
|
||||
创建脚本后，我们可以 **双击它** 来跳转到代码编辑器页面。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*gmIjSbbNHZ0AAAAAAAAAAAAADhuCAQ/original" alt="image-20230921180953712" style="zoom:50%;" />
|
||||
|
||||
进入代码编辑器后，我们写一个非常简单的旋转功能：
|
||||
|
||||
```ts
|
||||
// Script.ts
|
||||
import { Script } from "@galacean/engine";
|
||||
|
||||
export default class extends Script {
|
||||
onUpdate(deltaTime: number) {
|
||||
this.entity.transform.rotate(1, 1, 1);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
在写好代码后，保存（`⌘+s`）, 右侧预览区就可以实时的看到整个场景的效果。
|
||||
|
||||
### 导出项目
|
||||
|
||||
现在，我们已经完成了在编辑器中的基础开发工作，接下来我们来导出这个项目到本地。
|
||||
|
||||
我们点击左侧工具栏的 **下载** 按钮，会唤起导出界面，我们这里把项目名改为 “box”，然后点击 `Download` 按钮，编辑器就会把项目打包为一个 `box.zip` 文件下载。
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*mmoIRqIt30oAAAAAAAAAAAAADhuCAQ/original" alt="image-20230921162204014" style="zoom:50%;" />
|
||||
|
||||
项目打包完成后，我们使用 VsCode 打开 box 项目，运行 `npm install` & `npm run dev` ，可以看到项目已经能够正常运行了。
|
||||
|
||||
## 脚本使用
|
||||
|
||||
<playground src="scene-basic.ts"></playground>
|
||||
|
||||
## 引入模块
|
||||
|
||||
我们开始使用 [TypeScript](https://www.typescriptlang.org/) 编写引擎代码。如果你还不太适应 TypeScript，使用 JavaScript 也一样可以运行，并且同样可以享受到引擎 API 提示（通过使用 [VSCode](https://code.visualstudio.com/) 等 IDE 进行编程）。
|
||||
|
||||
回到我们的编程，为了实现这样一个功能，需要在我们的工程里引入如下 Galacean 引擎的类：
|
||||
|
||||
```typescript
|
||||
import {
|
||||
WebGLEngine,
|
||||
Camera,
|
||||
MeshRenderer,
|
||||
PrimitiveMesh,
|
||||
BlinnPhongMaterial,
|
||||
DirectLight,
|
||||
Script,
|
||||
Vector3,
|
||||
Vector4,
|
||||
Color,
|
||||
} from "@galacean/engine";
|
||||
```
|
||||
|
||||
我们先来简单认识一下这些类：
|
||||
|
||||
| 类型 | 类名 | 释义 |
|
||||
| -------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| WebGL 引擎类 | [WebGLEngine](${api}rhi-webgl/WebGLEngine) | WebGL 平台引擎，支持 WebGL1.0 和 WebGL2.0，它能够控制画布的一切行为，包括资源管理、场景管理、执行/暂停/继续、垂直同步等功能。(详见 [引擎](/docs/core/engine) 章节。) |
|
||||
| 组件类 | [Camera](/apis/core/#Camera) | 相机，是一个图形引擎对 3D 投影的抽象概念，作用好比现实世界中的摄像机或眼睛，如果不加相机，画布将什么都画不出来。（详见 [相机](/docs/graphics-camera) 章节） |
|
||||
| | [DirectLight](/apis/core/#DirectLight) | 直接光，是光照的一种，光照使场景更有层次感，使用光照，能建立更真实的三维场景。（详见 [光照](/docs/graphics-light) 章节） |
|
||||
| | [Script](/apis/core/#Script) | 脚本，是衔接引擎能力和游戏逻辑的纽带，可以通过它来扩展引擎的功能，也可以脚本组件提供的生命周期钩子函数中编写自己的游戏逻辑代码。（详见 [脚本](/docs/script) 章节） |
|
||||
| | [MeshRenderer](/apis/core/#MeshRenderer) | 网格渲染器，使用网格对象（这个例子中就是立方体）作为几何体轮廓的数据源 |
|
||||
| 几何体和材质类 | [PrimitiveMesh](/apis/core/#PrimitiveMesh) | 基础几何体，提供了创建立方体、球体等网格对象的便捷方法。（详见 [内置几何体](/docs/graphics-model) 章节） |
|
||||
| | [BlinnPhongMaterial](/apis/core/#BlinnPhongMaterial) | 材质定义了如何渲染这个立方体，BlinnPhong 材质是经典的材质之一。（详见 [材质](/docs/graphics-material) 章节） |
|
||||
| 数学库相关类 | [Vector3](/apis/math/#Vector3), [Vector4](/apis/math/#Vector4), [Color](/apis/math/#Color) | 这几个类是数学计算的一些基本单元，用来计算立方体的位置、颜色等。（详见 [数学库](/docs/core/math) 章节） |
|
||||
|
||||
## 创建引擎实例
|
||||
|
||||
创建引擎实例，参数 `canvas` 是 _Canvas_ 元素的 `id`，若 `id` 不同请自行替换。如上文所述，通过 [resizeByClientSize](${api}rhi-webgl/WebCanvas#resizeByClientSize) 方法重设画布高宽。
|
||||
|
||||
```typescript
|
||||
const engine = await WebGLEngine.create({ canvas: "canvas" });
|
||||
engine.canvas.resizeByClientSize();
|
||||
```
|
||||
|
||||
## 创建场景根节点
|
||||
|
||||
值得注意的是，一个引擎实例可能包含多个场景实例，如果为了在当前激活的场景中添加一个立方体，需要通过引擎的场景管理器 `engine.sceneManager` 获得当前激活的场景。
|
||||
|
||||
获得场景后，通过场景的 `createRootEntity` 方法创建一个**根实体**。场景中的根实体是场景树的根节点。
|
||||
|
||||
```typescript
|
||||
const scene = engine.sceneManager.activeScene;
|
||||
const rootEntity = scene.createRootEntity("root");
|
||||
```
|
||||
|
||||
## 创建一个相机实体
|
||||
|
||||
在 Galacean Engine 中，功能是以组件形式添加到实体上的。首先，我们先创建一个实体用来添加相机组件。
|
||||
|
||||
创建完成之后，通过实体上自带的变换组件 `transform` 来改变相机的位置和朝向。然后给这个实体添加相机组件 `Camera`。
|
||||
|
||||
```typescript
|
||||
let cameraEntity = rootEntity.createChild("camera_entity");
|
||||
|
||||
cameraEntity.transform.position = new Vector3(0, 5, 10);
|
||||
cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
|
||||
|
||||
let camera = cameraEntity.addComponent(Camera);
|
||||
```
|
||||
|
||||
## 创建光照
|
||||
|
||||
同样的，光照也是通过组件形式挂载到实体上。创建完实体之后，添加直接光组件 `DirectLight`，设置直接光组件的颜色、强度属性和光照角度来获得合适的光照效果。
|
||||
|
||||
```typescript
|
||||
let lightEntity = rootEntity.createChild("light");
|
||||
|
||||
let directLight = lightEntity.addComponent(DirectLight);
|
||||
directLight.color = new Color(1.0, 1.0, 1.0);
|
||||
directLight.intensity = 0.5;
|
||||
|
||||
lightEntity.transform.rotation = new Vector3(45, 45, 45);
|
||||
```
|
||||
|
||||
## 创建立方体
|
||||
|
||||
再创建一个实体用来挂载立方体网格渲染组件。`MeshRenderer` 是网格渲染器组件，通过 `.mesh` 属性设置成 `PrimitiveMesh` 创建的立方体数据，通过 `setMaterial` 方法把立方体的材质设置成 BlinnPhong。
|
||||
|
||||
```typescript
|
||||
let cubeEntity = rootEntity.createChild("cube");
|
||||
let cube = cubeEntity.addComponent(MeshRenderer);
|
||||
cube.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
|
||||
cube.setMaterial(new BlinnPhongMaterial(engine));
|
||||
```
|
||||
|
||||
## 启动引擎
|
||||
|
||||
一切都准备好了，让我们用一行代码来启动引擎吧！
|
||||
|
||||
```typescript
|
||||
engine.run();
|
||||
```
|
||||
@@ -5,13 +5,13 @@ type: 脚本
|
||||
label: Script
|
||||
---
|
||||
|
||||
自定义脚本的基类是 [Script](/apis/core/#Script) ，它扩展自 [Component](/docs/core/component)，因此包含组件的能力与操作。如：
|
||||
脚本是衔接引擎能力和游戏逻辑的纽带，可以通过它来扩展引擎的功能，也可以脚本组件提供的生命周期钩子函数中编写自己的游戏逻辑代码。自定义脚本的基类是 [Script](/apis/core/#Script) ，它扩展自 [Component](/docs/core-component)，因此它不仅支持组件的基础能力：
|
||||
|
||||
- 挂载到 [Entity](/docs/core/entity) 上
|
||||
- 方便地获取节点实例，组件实例
|
||||
- 遵循组件的禁用销毁规则
|
||||
|
||||
除此以外，脚本还提供丰富的生命周期回调函数，只要脚本中重写特定的回调函数，不需要手工调用它们，Galacean 就会在特定的时期自动执行相关脚本。
|
||||
此外，还提供丰富的生命周期回调函数，只要脚本中重写特定的回调函数，不需要手工调用它们，Galacean 就会在特定的时期自动执行相关脚本。
|
||||
|
||||
## 脚本生命周期
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ Galacean 对 XR 做了干净灵活的设计：
|
||||
|
||||
> `@galacean/engine-xr` 和 `@galacean/engine-web-xr`是实现 **WebXR** 必须引入的依赖，相较于上述两个包，`@galacean/engine-toolkit-xr` 则不是必须的，但它的存在可以让编辑器开发 XR 变得更加简单。
|
||||
|
||||
> XR 包之间的依赖规则遵守[版本依赖规则](/docs/quick-start/version/#版本依赖)，即 `@galacean/engine-xr` 和 `@galacean/engine-web-xr` 的版本需与 `@galacean/engine` 保持一致，`@galacean/engine-toolkit-xr` 的大版本需要与 `@galacean/engine` 保持一致。
|
||||
> XR 包之间的依赖规则遵守[版本依赖规则](/docs/basics/version/#版本依赖)，即 `@galacean/engine-xr` 和 `@galacean/engine-web-xr` 的版本需与 `@galacean/engine` 保持一致，`@galacean/engine-toolkit-xr` 的大版本需要与 `@galacean/engine` 保持一致。
|
||||
|
||||
## 快速上手
|
||||
|
||||
|
||||
Reference in New Issue
Block a user