PlayCanvas WebGL 游戏引擎

PlayCanvas 是一个开源游戏引擎。它使用 HTML5 和 WebGL 在任何移动或桌面浏览器中运行游戏和其他交互式 3D 内容。

项目展示

许多游戏和应用已使用 PlayCanvas 引擎发布。以下是一小部分示例：

您可以在 PlayCanvas 网站上查看更多游戏。

用户

PlayCanvas 被视频游戏、广告和可视化领域的领先公司使用，如：
Animech、Arm、宝马、迪士尼、Facebook、Famobi、Funday Factory、IGT、King、Miniclip、Leapfrog、Mojiworks、Mozilla、Nickelodeon、Nordeus、NOWWA、PikPok、PlaySide Studios、Polaris、Product Madness、三星、Snap、Spry Fox、Zeptolab、Zynga

特性

PlayCanvas 是一个功能齐全的游戏引擎。

🧊 图形 - 基于WebGL2和WebGPU构建的先进2D + 3D图形引擎。
🏃 动画 - 强大的基于状态的角色动画和任意场景属性动画
⚛️ 物理 - 与3D刚体物理引擎ammo.js的完全集成
🎮 输入 - 鼠标、键盘、触摸、游戏手柄和VR控制器API
🔊 声音 - 基于Web Audio API构建的3D定位音效
📦 资产 - 基于glTF 2.0、Draco和Basis压缩的异步流式系统
📜 脚本 - 使用TypeScript或JavaScript编写游戏行为

使用方法

这里有一个超级简单的Hello World示例 - 一个旋转的立方体！

import * as pc from 'playcanvas';

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const app = new pc.Application(canvas);

// 以全分辨率填充可用空间
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

// 确保当窗口大小改变时画布也随之调整大小
window.addEventListener('resize', () => app.resizeCanvas());

// 创建盒子实体
const box = new pc.Entity('cube');
box.addComponent('model', {
  type: 'box'
});
app.root.addChild(box);

// 创建相机实体
const camera = new pc.Entity('camera');
camera.addComponent('camera', {
  clearColor: new pc.Color(0.1, 0.2, 0.3)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3);

// 创建定向光源实体
const light = new pc.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引擎搭建本地开发环境的完整指南可以在这里找到。