使用编辑器

通过 PlayCanvas 编辑器逐步创建可交互环绕的 3D 玩具猫场景。

提示

完整项目见这里。也可直接派生项目，或在操作遇到困难时参考。

视频演示

短视频展示完整过程：

视频中的操作步骤如下：

创建项目

首先新建 PlayCanvas 项目：

1. 访问 playcanvas.com 并登录。
2. 点击 NEW（新建）。
3. 选择 Blank Project（空白项目）。
4. 输入名称，例如“My First Splat”。
5. 点击 CREATE（创建）。

进入项目仪表盘后，点击 EDITOR 打开空白场景。

准备场景

先做少量调整：

1. 在 HIERARCHY（层级）选择并删除 Light、Box 和 Plane。
2. 点击视口的 Settings 齿轮。
3. 在 INSPECTOR（检查器）进入 SETTINGS → RENDERING：
   • 点击 x 清除 Skybox，移除默认蓝天。
   • 取消 Anti-Alias 和 Device Pixel Ratio。

性能优化

关闭抗锯齿和设备像素比可减少主要瓶颈——片元处理负载，优化高斯泼溅性能，参见性能。

现在应看到干净的深灰视口，层级中只剩相机。

上传资源

先下载玩具猫文件到本地：https://developer.playcanvas.com/assets/toy-cat.sog。

将下载文件加入项目：

1. 在屏幕底部 ASSETS（资源）面板点击 +。
2. 选择 Upload（上传）。
3. 在文件对话框选择 toy-cat.sog，点击 Open。

编辑器处理后，将其作为名为 toy-cat.sog 的 gsplat 资源显示。

创建实体

创建用于显示的实体：

1. 从 ASSETS 将 toy-cat.sog 拖入视口。

编辑器在根下创建实体，视口应显示玩具猫。

调整位置

数据未以原点居中，需要调整变换：

1. 在 HIERARCHY 选择新实体。
2. 在 INSPECTOR 将 Position 设为 X: 0, Y: -0.7, Z: 0。

玩具猫现在应以原点居中。

添加相机控制

为相机分配脚本，实现交互：

1. 右键链接并选择另存为：camera-controls.mjs。
2. 在 ASSETS 点击 +。
3. 选择 Upload。
4. 选择下载的 camera-controls.mjs，点击 Open。

将脚本附加到相机：

1. 在 HIERARCHY 选择 Camera。
2. 在 INSPECTOR 点击 ADD COMPONENT，选择 Script。
3. 在脚本组件点击 Add Script 下拉菜单。
4. 选择 cameraControls。

控制脚本已附加，可以使用。

测试场景

测试交互：

1. 点击视口工具栏 LAUNCH 运行项目。
2. 浏览器应显示玩具猫。
3. 尝试：
   • 左键拖动：环绕。
   • 滚轮：缩放。

最终结果

你已通过编辑器创建交互式高斯泼溅应用。

后续步骤

接下来可尝试：

• 换成自己的 .sog 文件。
• 添加 UI。
• 通过脚本创建更复杂的交互。