PlayCanvas基于WebGL的游戲引擎

playcanvas是一款基于WebGL的游戲引擎，集UI、2D、3D、編輯器于一體。

一般來講，游戲開發(fā)與web應(yīng)用完全是兩碼事。但事實(shí)上游戲世界的很多工具都可以用在網(wǎng)站中增加華麗界面。PlayCanvas就是一個基于WebGL的游戲引擎，結(jié)合了物理、光影、音效等工具，用于創(chuàng)建一個復(fù)雜的界面。

• 圖形 -基于WebGL 1和2構(gòu)建的高級2D + 3D圖形引擎。
• 動畫 -強(qiáng)大的基于狀態(tài)的動畫，用于角色和任意場景屬性
• 物理 -與3D剛體物理引擎ammo.js完全集成
• 輸入 -鼠標(biāo)，鍵盤，觸摸，游戲手柄和VR控制器API
• 聲音 -基于Web Audio API構(gòu)建的3D位置聲音
• 資產(chǎn) -基于glTF 2.0，Draco和Basis壓縮構(gòu)建的異步流系統(tǒng)
• 腳本 -使用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);
});