Hello World项目

    • 创建项目
    • 了解工程目录
    • 创建一个物体
    • 创建、修改、绑定脚本
    • 运行及调试项目

    在Dashboard面板中，点击右下角新建按钮，在弹出菜单中选中Creator 3D。

    选择空的模板，设置项目路径，点击下方的创建按钮。

    Hello world! - 图2

    编辑器界面

    工程目录

    通常情况的我们只需要关心assets(资源目录)

    • assets(资源目录)

    • build(构建目录)

    • library(导入的资源目录)

    • local(日志文件目录)

    • profiles(编辑器配置)

    • package.json(项目配置)

    左下方资源管理器面板点击鼠标右键，选择新建->Scene。

    Hello world! - 图4

    创建物体

    左上方层级管理器面板点击鼠标右键, 选择创建->3D对象->Cube 正方体。创建的正方体就会出现在场景编辑器里。

    修改Camera

    • 选择Camera对象
      在层级管理器面板，选择Camera，场景编辑器会选中它，并显示Gizmo。
      Hello world! - 图6

    • 修改Camera位置
      在场景编辑器里，拖动Gizmo, 使Camera能够看到创建的正方体。

    • 修改Camera背景颜色
      在属性检查器面板，点击Color属性，选择黑色为背景色。
      Hello world! - 图8

    • 生命周期函数（按以下顺序调用）

      • onEnable
        组件的 enabled 属性从 false 变为 true 时调用

      • start
        组件第一次激活时调用

      • update
        每一帧渲染前更新物体调用

      • lateUpdate
        在所有组件的 update 都执行完之后调用

      • onDisable
        组件的 enabled 属性从 true 变为 false 时调用

      • onDestroy
        组件或者所在节点销毁时调用

    • 添加代码
      添加start()函数，并输出Hello world
    • 为物体绑定脚本
      选择创建的正方体，在属性检查器面板点击添加组件->自定义脚本->HelloWorld

    运行项目

    编辑器菜单栏点击->项目->运行预览, 或者点击中间的运行按钮。
    Hello world! - 图11

    调试项目

    以Chrome浏览器为例： 按 或者 Ctrl + Shift + I 打开Chrome的开发者工具。

    • 日志信息
      Console面板显示了所有日志输出

    • 断点调试
      选择标签栏的Source选项，按下Ctrl+P，搜索HelloWorld.ts，在start函数里设置断点，再刷新网页就可以调试了。
      Hello world! - 图13