playcanvas（基于WebGL的游戏引擎）

PlayCanvas 是一款使用 HTML5 和 WebGL 技术运行游戏以及其他 3D 内容的开源游戏引擎，PlayCanvas 以其独特的性能实现了在任何手机移动端和桌面浏览器端均可以流畅运行。

PlayCanvas 引擎是一款可以基于浏览器的用于制作游戏以及 3D 可视化的开源引擎。除此之外，还开发了PlayCanvas 开发平台， 为用户提供了可视化编辑器，资源管理，代码编辑，代码托管以及发布等服务。

目前中文的教程很少，所以英语好的同学可以去看一下国外的那些教程，但是还是有中文文档的。

可视化平台操作上倒是没什么难度，就是和正常的建模操作大同小异，一个可视化的一个操作平台，可以进一步的提高我们工作的效率吧。

一、注册账户

注册账户的方式很简单，根据提示去注册就可以了

二、新建项目

1.我们点击NEW，即可创建新项目

2.点击我们的项目就可以进入项目界面

3.点击EDITOR就可以进入可视化操作平台，去操作我们的项目

三、导出项目

1.导出项目前，我们得先pulish

2.点击下载 .zip 包

3.将包用vsCode打开，运行index.html

四、其他界面菜单

1.工具栏和菜单栏

点击 PLAYCANVAS 图标会显示所有的可用功能，可以使用这些功能编辑场景。如果找不到某个按钮或者快捷键，肯定是能在菜单里找到对应功能的。

工具栏提供快捷访问的常用功能，其中包含最重要的运行按钮。运行按钮会在一个独立的浏览器窗口中启动游戏并且加载当前的场景，可以立即开始游戏测试。可以从属性编辑栏中看到运行中游戏的实时参数变化。

2.层级树

场景是由层级结构的实体组成，场景层级树显示了当前整个场景的树形结构。一个场景永远包含一个根节点实体，位于层级树的最顶端。所有其他的实体都是由开发者逐步加入的。

层级树面板包含了场景中的全部实体，可以在其中快速定位实体，而不必在场景中搜寻。点击层级树上的实体将会选中它。

创建和删除实体

当在层级树中选中一个实体时，用户可以创建一个新的实体或者选出这个所选中的选项。或者使用位于层级树面板左上角的各种按钮，又或者通过点击操作打开内容目录来进行操作。

3.检测器

检查器面板会显示当前选定对象的属性值。

根据选择的不同，会现实不同的检查器面板。目前有

• 实体/组件检查器
• 纹理检查器
• 材质检查器
• Cubemap检查器

修改这些数值用以特制化实体的行为。譬如可以设置 Model 组件所渲染的模型，或灯光的颜色等灯。

有些参数是简单的文字或数值，通过标准的文字框和滑动条来进行修改。有些值需要特殊的编辑方式，譬如从资源面板中选取一个高亮的资源之类（选取纹理等）。有些值可以通过视口进行可视化编辑，譬如可以直接在视口中用Gizmo平移旋转缩放一个实体的变换属性.

在应用和编辑器同时运行的情况下，对实体属性的修改将会传递到运行中的应用中。一个绝佳的迭代方式是在应用运行起来之后，并排打开编辑器和应用窗口，实时的对想要的调整的值进行修正。

4.视口

视口展示了当前场景的可视化状态。你可以通过移动摄影机在场景中自由漫游。

摄影机

初始情况下，编辑器会采用 透视 摄影机。这种摄影机如同电影摄影机一般漂浮在场景之中。可以使用摄影机选择菜单选择场景中的不同摄影机。 正交 摄影机包含几个确定的机位：顶视图，底视图，前视图，后视图，左视图，右视图。通过这些机位可以无透视的观察场景，特别方便用来调整场景中的实体位置之类。

在摄影机菜单中选择摄影机的同时，场景中的摄影机实体会被显示为高亮状态。可以利用这个特性精确的设置摄影机位置。

5.资源

资源面板管理了所有的项目中的可用资源。从这个面板可以创建，上传，删除，查看和编辑任何资源

五、小结

three.js还是比PlayCanvas活跃的，当然，如果感兴趣并且有精力的话，还是建议都了解了解

毕竟知识是无穷无尽的

参考链接：

[playcanvas-github]: “https://github.com/playcanvas/engine/blob/main/README-zh.md “
[playcanvas中文]: “https://developer.playcanvas.com/zh/ “