editor:基于 WebGL/WebGPU/WebXR 的视觉编辑环境项目

Browser-based visual editor for building WebGL, WebGPU, WebXR apps

Branch13Tags246
FilesLast commitLast update
2 months ago
1 year ago
12 days ago
8 days ago
8 months ago
12 days ago
8 days ago
6 months ago
1 month ago
2 months ago
1 month ago
2 months ago
1 year ago
2 months ago
6 months ago
6 months ago
8 months ago
1 month ago
2 months ago
2 months ago
8 days ago
8 days ago
2 months ago
1 month ago
2 months ago
1 month ago
1 month ago

PlayCanvas Editor

Status Github Release License Discord Reddit X

| 用户手册 | API 参考 | 博客 | 论坛 |

PlayCanvas Editor 是一个可视化编辑环境,用于构建 WebGL/WebGPU/WebXR 应用程序。可通过 https://playcanvas.com 访问。

Editor

您可以在 PlayCanvas 网站 上查看更多使用该编辑器构建的项目。

Tip

AI 辅助开发: 编辑器内置了 Model Context Protocol (MCP) 集成,允许 AI 助手通过打开的编辑器会话直接检查和修改项目。

本地开发

要初始化编辑器前端的本地开发环境,请确保已安装 Node.js 18 或更高版本。请按照以下步骤操作:

  1. 克隆仓库:

    git clone https://github.com/playcanvas/editor.git
    cd editor
    
  2. 安装依赖:

    npm install
    
  3. 构建编辑器前端并启动本地 Web 服务器:

    npm run develop
    
  4. playcanvas.com 打开编辑器,并附加查询参数 use_local_frontend 以加载开发构建版本:

    https://playcanvas.com/editor/scene/<YOUR_SCENE_ID>?use_local_frontend
    

    这将从 http://localhost:3487 加载编辑器前端,而非生产构建版本。

Note

代码编辑器和启动页面也支持此查询参数

库集成测试

编辑器基于以下开源库构建:

详情
PlayCanvas Engine 为编辑器的 3D 视图和启动页面提供支持
Observer 数据绑定和历史记录
PCUI 前端组件库
PCUI-Graph 用于渲染基于节点的图形的 PCUI 插件

要测试这些库的集成,请使用 npm link。请按照以下步骤操作:

  1. 从源代码创建全局链接

    cd <library>
    npm link
    
  2. 创建指向全局链接的链接

    cd editor
    npm link <library>
    

测试套件

PlayCanvas 编辑器的测试套件使用 Playwright 进行端到端测试。

Playwright

测试

测试分为两类:

  • test-suite/test/api - 编辑器 API 行为测试
  • test-suite/test/ui - 编辑器 UI 行为测试

运行测试

要运行测试套件,请确保已安装 Docker。请按照以下步骤操作:

  1. 基于模板创建 .env 文件

    PC_HOST=playcanvas.com
    PC_LOGIN_HOST=login.playcanvas.com
    PC_LAUNCH_HOST=launch.playcanvas.com
    PC_LOCAL_FRONTEND=<true|false>
    PC_COOKIE_NAME=pc_auth
    PC_COOKIE_VALUE=<playcanvas-cookie>
    

Important

所使用的账户必须是现有账户。可在此创建一个账户

  1. 使用 Docker Compose 运行容器

    docker compose up
    
  2. 使用 Docker Compose 停止容器

    docker compose down --remove-orphans
    

Note

若要从源代码构建镜像而不是从注册表拉取,请附加 --build 标志

测试套件本地开发

若要创建新测试,请确保已安装 Node.js 18 或更高版本。请按照以下步骤操作:

  1. 安装依赖:

    cd test-suite
    npx playwright install --with-deps
    npm install
    
  2. 创建测试并将其放入相应的文件夹中。若要动态录制测试,请运行以下命令:

    npm run codegen
    

Note

运行 npm run 可查看完整的 npm 脚本列表

Introduction

基于浏览器的可视化编辑器,用于构建 WebGL、WebGPU、WebXR 应用程序【此简介由AI生成】

Customize your domain
241.31 K215Visit GitHub