你的第一个应用

使用 PlayCanvas Editor 开发应用既简单又有趣。让我们花几分钟学习基础知识，重新制作下面这个简单的 3D 应用：

使用方向键移动红色小球。

首先，打开 PROJECTS 页面。

项目页面

点击 NEW 按钮创建新项目：

新建项目

将项目命名为 My First App。描述是可选的，可以稍后填写。点击 CREATE。

项目创建完成后，点击 EDITOR 按钮进入编辑器：

首次打开编辑器时，可以看到系统已经创建了一个最小场景：

编辑器

场景中包含一台用于渲染场景的相机、一个放置在平面上的立方体，以及一盏照亮 3D 对象的灯。

你可以轻松把立方体改成其他形状，例如球体。在 HIERARCHY 面板中选中 Box 实体，然后在右侧 Inspector 面板中，将 RENDER 组件的 Type 属性从 Box 改为 Sphere。最后，也将实体名称从 Box 改为 Sphere。

从立方体改为球体

球体目前是比较单调的灰色。让我们把它改成红色！首先点击 ASSETS 面板中的 + 图标创建材质：

创建材质

选中材质后，右侧 Inspector 面板会显示其属性。展开 DIFFUSE 部分，点击色块，将颜色改为红色：

红色材质

接下来，将材质赋给球体。拖放即可完成：

拖放材质

现在设置 Camera 实体。在 HIERARCHY 面板中选中它：

选中编辑器相机

注意，选中相机后会出现一个小型预览窗口。调整相机的位置和旋转，从正前方观察场景中的对象。将相机的位置和旋转设置为下图中的数值：

相机变换

接下来，让球体能够通过键盘方向键控制。为此，需要创建脚本。右键点击 Sphere 实体，选择 Add Component -> Script。

添加脚本组件

Sphere 实体的 Inspector 面板中会出现脚本组件。在该组件中输入名称 movement.js，创建脚本资源。

创建脚本资源

按 Enter 键，即可创建脚本。

编辑脚本

点击 movement 脚本上的编辑图标（铅笔），打开代码编辑器。你会看到下面的脚本框架：

ESM
经典脚本

import { Script } from 'playcanvas';

export class Movement extends Script {
    static scriptName = "movement";

    initialize() {
        // initialize code called once per entity
    }

    update(dt) {
        // update code called every frame
    }
}

var Movement = pc.createScript('movement');

// initialize code called once per entity
Movement.prototype.initialize = function() {

};

// update code called every frame
Movement.prototype.update = function(dt) {

};

为了让球体能够被控制，需要在 update 函数中添加代码。复制并粘贴以下代码：

ESM
经典脚本

import { Script, KEY_LEFT, KEY_RIGHT, KEY_UP, KEY_DOWN } from 'playcanvas';

export class Movement extends Script {
    static scriptName = "movement";

    initialize() {
        // initialize code called once per entity
    }

    update(dt) {
        // get which keys are pressed
        var keyboard = this.app.keyboard;
        var left  = keyboard.isPressed(KEY_LEFT);
        var right = keyboard.isPressed(KEY_RIGHT);
        var up    = keyboard.isPressed(KEY_UP);
        var down  = keyboard.isPressed(KEY_DOWN);

        // move this entity based on which keys are pressed
        // dt is the time in seconds since the last frame and stands for 'delta time'
        if (left) {
            this.entity.translate(-dt, 0, 0);
        }
        if (right) {
            this.entity.translate(dt, 0, 0);
        }
        if (up) {
            this.entity.translate(0, 0, -dt);
        }
        if (down) {
            this.entity.translate(0, 0, dt);
        }
    }
}

var Movement = pc.createScript('movement');

// initialize code called once per entity
Movement.prototype.initialize = function() {

};

// update code called every frame
Movement.prototype.update = function(dt) {
    // get which keys are pressed
    const keyboard = this.app.keyboard;
    const left  = keyboard.isPressed(pc.KEY_LEFT);
    const right = keyboard.isPressed(pc.KEY_RIGHT);
    const up    = keyboard.isPressed(pc.KEY_UP);
    const down  = keyboard.isPressed(pc.KEY_DOWN);

    // move this entity based on which keys are pressed
    // dt is the time in seconds since the last frame and stands for 'delta time'
    if (left) {
        this.entity.translate(-dt, 0, 0);
    }
    if (right) {
        this.entity.translate(dt, 0, 0);
    }
    if (up) {
        this.entity.translate(0, 0, -dt);
    }
    if (down) {
        this.entity.translate(0, 0, dt);
    }
};