PlayCanvas基于WebGL的游戏引擎

联合创作 · 2023-09-30 11:15

playcanvas是一款基于WebGL的游戏引擎,集UI、2D、3D、编辑器于一体。

一般来讲,游戏开发与web应用完全是两码事。但事实上游戏世界的很多工具都可以用在网站中增加华丽界面。PlayCanvas就是一个基于WebGL的游戏引擎,结合了物理、光影、音效等工具,用于创建一个复杂的界面。

  • 图形 -基于WebGL 1和2构建的高级2D + 3D图形引擎。
  • 动画 -强大的基于状态的动画,用于角色和任意场景属性
  • 物理 -与3D刚体物理引擎ammo.js完全集成
  • 输入 -鼠标,键盘,触摸,游戏手柄和VR控制器API
  • 声音 -基于Web Audio API构建的3D位置声音
  • 资产 -基于glTF 2.0DracoBasis压缩构建的异步流系统
  • 脚本 -使用Typescript或JavaScript编写游戏行为

示例代码:

// Create a PlayCanvas application
var canvas = document.getElementById("application-canvas");
var app = new pc.fw.Application(canvas, {});
app.start();

// Fill the available space at full resolution
app.setCanvasFillMode(pc.fw.FillMode.FILL_WINDOW);
app.setCanvasResolution(pc.fw.ResolutionMode.AUTO);

// Create box entity
var cube = new pc.fw.Entity();
app.context.systems.model.addComponent(cube, {
    type: "box"
});

// Create camera entity
var camera = new pc.fw.Entity();
app.context.systems.camera.addComponent(camera, {
    clearColor: new pc.Color(0.1, 0.1, 0.1)
});

// Create directional light entity
var light = new pc.fw.Entity();
app.context.systems.light.addComponent(light);

// Add to hierarchy
app.context.root.addChild(cube);
app.context.root.addChild(camera);
app.context.root.addChild(light);

// Set up initial positions and orientations
camera.setPosition(0, 0, 3);
light.setEulerAngles(45, 0, 0);

// Register an update event
app.on("update", function (deltaTime) {
    cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
});
浏览 6
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报