Galacean Runtime 快速入门：创建一个旋转的3D小鸭子

Galacean Runtime 快速入门：创建一个旋转的3D小鸭子

前言

Galacean Runtime 是一个功能强大的3D引擎，它为开发者提供了创建丰富3D内容的工具和环境。本文将通过一个简单的"旋转小鸭子"示例，带您快速了解如何使用Galacean Runtime进行3D开发。

环境准备

在开始之前，请确保您已经登录到Galacean Runtime的编辑器界面。编辑器首页会显示您所有的项目列表，这是我们开始创作的地方。

创建新项目

1. 点击右上角的"新建项目"按钮
2. 选择"3D项目"类型
3. 系统会自动创建一个包含相机和平行光的空白场景

新建的3D场景中已经预设了两个基本元素：

• 相机：用于观察场景的视角
• 平行光：为场景提供基础照明

3D开发基础概念

在深入开发前，让我们先了解几个核心概念：

| 概念 | 说明 | |------------|----------------------------------------------------------------------| | 场景(Scene) | 3D内容的容器，包含所有3D对象和光照环境 | | 实体(Entity)| 场景中的基本单位，代表一个独立存在的3D对象 | | 组件(Component) | 赋予实体特定功能的模块，如渲染、物理、脚本等 | | 脚本(Script) | 自定义逻辑组件，用于控制实体的行为 | | 资产(Asset) | 项目中使用的外部资源，如3D模型、纹理、材质等 |

构建3D场景

导入3D模型

1. 准备一个3D鸭子模型文件(.glb格式)
2. 将模型文件拖拽到编辑器的"资产面板"
3. 等待模型上传和解析完成

放置模型到场景

1. 从资产面板中找到鸭子模型
2. 将其拖拽到场景视图中
3. 观察场景节点树中新添加的鸭子实体

调整模型变换

选中鸭子实体后，可以使用顶部工具栏的变换工具：

1. 移动工具：调整模型在场景中的位置
2. 旋转工具：改变模型的角度和朝向
3. 缩放工具：修改模型的大小比例

编辑器提供了直观的3D操作手柄，与主流3D软件的操作方式一致。将鼠标悬停在不同手柄上会有提示，帮助您快速掌握操作方法。

优化场景光照

默认的平行光可能不够明亮，我们可以：

1. 在节点树中选择"DirectLight"实体
2. 在右侧属性面板中找到"强度(Intensity)"参数
3. 通过滑块调整光照强度，使场景更明亮

添加交互逻辑

创建脚本组件

1. 在资产面板右键 → 创建 → 新建空脚本
2. 选中鸭子实体
3. 在右侧检查器面板点击"添加组件" → 选择"Script"
4. 将新创建的脚本资产分配给该组件

编写旋转逻辑

双击脚本资产进入代码编辑器，在onUpdate方法中添加旋转逻辑：

import { Script } from "@galacean/engine";

export default class extends Script {
  onUpdate(deltaTime: number) {
    // 每帧绕Y轴旋转1度
    this.entity.transform.rotate(0, 1, 0);
  }
}

代码说明：

• onUpdate是引擎每帧调用的方法
• deltaTime参数表示上一帧到当前帧的时间间隔(秒)
• rotate方法接受X/Y/Z三个轴的旋转角度

保存脚本后，您将立即在预览窗口中看到鸭子开始旋转。

项目导出与运行

完成开发后，可以导出项目：

1. 点击左侧工具栏的"下载"按钮
2. 输入项目名称(如"duck")
3. 点击"下载"按钮获取项目压缩包

导出后，您可以在本地环境中运行项目：

1. 解压项目文件
2. 使用代码编辑器打开项目
3. 运行npm install安装依赖
4. 运行npm run dev启动开发服务器

总结

通过这个简单的"旋转小鸭子"示例，我们学习了Galacean Runtime的基本工作流程：

1. 创建3D项目
2. 导入3D模型
3. 调整场景布局
4. 添加交互逻辑
5. 导出并运行项目

这只是一个开始，Galacean Runtime还提供了更多强大的功能，如物理模拟、粒子系统、动画控制等，等待您去探索和实践。