使用 PlayCanvas 编辑器构建基本演示

PlayCanvas 编辑器是免费的——您只需注册您的帐户并登录即可开始使用。

首次注册后，您将直接进入编辑器，并获得一个简单的入门教程，其中涉及编辑 3D 滚球游戏。如果您愿意，可以在继续我们的教程之前完成此教程。当您准备好继续我们的教程时，请访问您的画布主页——例如，我的主页是https://playcanvas.com/end3r。页面如下所示——您可以创建和管理项目，更改其设置等。

点击新建按钮开始一个全新的项目。

结果对话框将显示一些不同的选项。有一些入门套件可用，但我们不想加载模型或启动平台游戏。

1. 我们希望从小开始，所以我们将使用空项目——点击空白项目选项并为其输入一个名称（我们使用“MDN 游戏演示”）。
2. 如果您愿意，可以输入描述——它是可选的。
3. 点击创建以创建它。

接下来，您将看到项目的页面——目前还没有太多内容。通过点击编辑器按钮，我们将启动在线 PlayCanvas 编辑器，我们将在其中使用形状创建场景。现在就执行此操作。

以下是场景在编辑器中最初的样子。即使这是一个空白的新项目，我们也不必完全从头开始——相机和方向光已经准备好了，所以您不必担心它们。

现在进入创意部分。要向场景添加实体，您必须点击位于编辑器左上角区域的大加号按钮，位于层次结构文本旁边。当您将鼠标悬停在该按钮上时，标签会显示“添加实体”——这正是我们想要做的。实体是场景中使用的任何对象——它可以是像盒子、圆柱体或圆锥体这样的对象，但它也可以是相机、灯光或声音源。点击该按钮后，您将看到一个下拉列表，其中包含许多可供选择的实体。继续点击盒子——它将被添加到场景中。

盒子是用默认值创建的——宽度、高度和深度设置为 1，并且放置在场景的中间。您可以将其拖动或在右侧面板中应用新值。

要向场景添加一些颜色，我们需要一个新的材质，它将用于新创建的盒子。点击资源选项卡中的加号按钮，然后在出现的下拉列表中点击材质选项以创建新材质。

点击资源选项卡中的新材质，其实体检查器将出现在显示屏的右侧。现在编辑名称文本字段以赋予其唯一名称（我们选择了boxMaterial）。唯一名称将帮助我们记住此材质的用途——我们稍后会添加更多！

要更改其颜色，我们将使用实体检查器中的漫反射选项。点击漫反射，然后选择颜色标签旁边的彩色方块——它将打开一个颜色轮。在这里，您可以点击所需的颜色或在底部的文本字段中将其输入为十六进制值。我们选择了十六进制值为0095DD的蓝色——在文本字段中输入此代码并按回车键以使其被接受。

现在，我们可以通过点击并拖动其图标从屏幕底部（材质名称左侧的小点——选择它可能有点麻烦；请坚持）到场景上的盒子上来将彩色材质应用于形状。

因此，在这一点上，我们创建了一个蓝色盒子。点击盒子以调出其实体侧边栏——您将看到用于更改其位置、旋转和缩放的选项。尝试应用旋转值 X: 10 和 Y: 20。

现在点击场景右上角的播放箭头以启动并渲染场景——它将在一个单独的浏览器选项卡中打开。

这看起来很棒！让我们向场景添加更多形状，使其看起来更有趣。

为了为更多形状腾出空间，将盒子移到左侧以腾出空间以放置下一个形状。您可以通过将其 X 位置值设置为 -2 来实现。

添加其他形状涉及与添加盒子非常相似的过程。点击层次结构面板中的根文件夹（以确保新形状出现在根目录中，而不是作为盒子的子级），然后点击大添加实体（加号）按钮并从下拉列表中选择圆柱体——它将向场景添加一个新的圆柱体形状。

现在按照我们之前为立方体着色时所做的步骤进行操作。

• 使用添加资源（加号）按钮创建一个新材质。
• 确保选中资源面板中的新材质，以调出实体检查器。
• 为材质赋予一个新名称，例如cylinderMaterial。
• 点击漫反射，然后点击颜色选择器——赋予其橙色（我们使用了 FF9500）。
• 将cylinderMaterial图标拖放到屏幕上的圆柱体对象上以应用该颜色。

再次遵循相同的方法向场景添加一个圆锥体，并赋予其灰色（我们使用了 EAEFF2）。您现在应该在场景中有三个形状，类似于下面的屏幕截图。

动画化 3D 模型可能被认为是一件高级的事情，但我们只想控制给定对象的一些属性——我们可以使用脚本组件来做到这一点。点击资源面板中的加号按钮，选择脚本选项，并将新脚本文件命名为boxAnimation.js。

如果双击它，您将被移动到代码编辑器。如您所见，该文件已经包含一些样板代码。

pc.script.create("boxAnimation", function (app) {
  class BoxAnimation {
    constructor(entity) {
      this.entity = entity;
    }

    // Called once after all resources are loaded and before the first update
    initialize() {}

    // Called every frame, dt is time in seconds since last update
    update(dt) {}
  }

  return BoxAnimation;
});

最有趣的部分是update()函数，我们可以在其中放置任何希望在每一帧重复的代码。在该函数内部添加以下行，以在每一帧旋转立方体。

this.entity.rotate(dt * 10, dt * 20, dt * 30);

在上面的代码行中，this.entity指的是将附加脚本的对象（盒子）；使用dt变量（其中包含自上一帧以来经过的增量时间），我们可以围绕所有三个轴以不同的量旋转盒子。

1. 使用代码编辑器右上角的保存按钮保存更改，然后返回到主编辑器选项卡。在这里，请按照以下步骤操作。
2. 确保您已在场景中选择了盒子。
3. 点击添加组件，然后在实体检查器中点击脚本。
4. 在屏幕底部，您可以看到可用的脚本列表——目前只有boxAnimation.js——点击它会将动画脚本添加到盒子对象。

现在我们将对圆柱体执行相同的步骤。首先

1. 创建一个新的脚本资源。
2. 将其命名为cylinderAnimation.js。
3. 双击脚本图标以启动代码编辑器。

这次，我们将尝试缩放对象而不是旋转它。为此，我们需要一个计时器来存储自动画开始以来经过的总时间。将此代码添加到initialize()函数中。

this.timer = 0;

并将这两行代码添加到update()函数中

this.timer += dt;
this.entity.setLocalScale(1, Math.abs(Math.sin(this.timer)), 1);

setLocalScale()方法将给定的值应用于对象的X、Y和Z轴。在我们的例子中，我们修改了圆柱体在Y轴上的缩放比例，并将Math.sin()定时器的值作为其值，并应用Math.abs()到结果，以使值始终大于零（0-1；正弦值通常在-1到1之间）。这为我们提供了一个不错的缩放效果。

请记住将cylinderAnimation.js文件添加到Cylinder对象中以应用给定的动画。

现在是时候处理最后一个对象——圆锥体了。创建一个coneAnimation.js文件，并双击它在编辑器中打开。

接下来，将以下行添加到initialize()函数中

this.timer = 0;

为了使圆锥体上下移动，我们将使用setPosition()方法——将下面的代码添加到update()函数中

this.timer += dt;
this.entity.setPosition(2, Math.sin(this.timer * 2), 0);

圆锥体的位置将在每一帧中通过传递每个时间点timer的Math.sin()值来进行动画处理——我们将this.timer的值加倍以使其移动得更高。

像之前一样，将coneAnimation.js脚本添加到圆锥体对象中。

启动演示以查看效果——所有形状都应该进行动画处理。恭喜你，你已经完成了教程！

现在，如果您还没有看过，可以查看PlayCanvas引擎文章，返回使用PlayCanvas构建基本演示页面，或返回上一级到主网络3D游戏页面。