README-zh.md
| 用户手册 | API 参考 | 例子 | 博客 | 论坛 |
PlayCanvas 是一款基于 WebGL2 和 WebGPU 构建的开源游戏引擎。使用它可以创建在任何浏览器和任何设备上运行的交互式 3D 应用、游戏和可视化内容。
npm install playcanvas
或者使用 create-playcanvas 快速创建一个完整项目：
npm create playcanvas@latest
以下为一个简单的使用案例 - 实现一个旋转的立方体！
import {
Application,
Color,
Entity,
FILLMODE_FILL_WINDOW,
RESOLUTION_AUTO
} from 'playcanvas';
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const app = new Application(canvas);
// 在全屏模式下填满可用空间
app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
app.setCanvasResolution(RESOLUTION_AUTO);
// 确保在窗口尺寸变化同时画布也同时改变其大小
window.addEventListener('resize', () => app.resizeCanvas());
// 创建一个立方体
const box = new Entity('cube');
box.addComponent('render', {
type: 'box'
});
app.root.addChild(box);
// 创建一个摄像头
const camera = new Entity('camera');
camera.addComponent('camera', {
clearColor: new Color(0.1, 0.2, 0.3)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3);
// 创建一个指向灯
const light = new Entity('light');
light.addComponent('light');
app.root.addChild(light);
light.setEulerAngles(45, 0, 0);
// 根据立方体的时间增量旋转立方体
app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));
app.start();
想要自己动手试试？点击 CodePen.
基于 PlayCanvas 引擎设置本地开发环境的完整指南可以在这里找到。
PlayCanvas 是一款优秀的全功能游戏引擎。
以你喜欢的方式使用 PlayCanvas 进行开发：
| 包 | 描述 |
|---|---|
playcanvas | 核心引擎（当前页面） |
@playcanvas/react | PlayCanvas 的 React 渲染器 |
@playcanvas/web-components | 通过自定义元素实现声明式 3D |
create-playcanvas | 项目脚手架 CLI |
| PlayCanvas 编辑器 | 基于浏览器的可视化编辑器 |
许多团队已经成功地使用了 PlayCanvas 引擎开发并发布了游戏和应用。以下是一些项目案例：
点击此链接查看更多案例： PlayCanvas website.
许多行业龙头公司在不同领域（广告，电子游戏以及产品可视化等）均使用了 PlayCanvas：
Animech, Arm, BMW, Disney, Facebook, Famobi, Funday Factory, IGT, King, Miniclip, Leapfrog, Mojiworks, Mozilla, Nickelodeon, Nordeus, NOWWA, PikPok, PlaySide Studios, Polaris, Product Madness, Samsung, Snap, Spry Fox, Zeptolab, Zynga
确保已安装 Node.js 18+ ，并安装 Node.js 相关依赖组件。
npm install
现在您就可以运行不同的搭建选项了：
| 命令 | 描述 | 输出到 |
|---|---|---|
npm run build | 构建所有引擎构建目标和类型声明 | build |
npm run docs | 构建引擎API参考文档 | docs |