playcanvas

3d game animation

PlayCanvas는 WebGL 기반의 3D 게임 엔진으로, 웹에서 실시간 3D 게임을 개발하기 위해 사용됩니다. 이 라이브러리는 HTML5와 WebGL을 사용하여 고성능의 3D 그래픽과 애니메이션을 구현할 수 있도록 지원합니다.

Latest Ver 2.4.0

Homepage

Github

10,125

📢 PlayCanvas는 HTML5 및 WebGL 기술을 활용한 3D 게임 개발 엔진입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/playcanvas/2.4.0/playcanvas.dbg.js

https://cdnjs.cloudflare.com/ajax/libs/playcanvas/2.4.0/playcanvas.dbg.min.js

https://cdnjs.cloudflare.com/ajax/libs/playcanvas/2.4.0/playcanvas.js

https://cdnjs.cloudflare.com/ajax/libs/playcanvas/2.4.0/playcanvas.min.js

https://cdnjs.cloudflare.com/ajax/libs/playcanvas/2.4.0/playcanvas.prf.js

https://cdnjs.cloudflare.com/ajax/libs/playcanvas/2.4.0/playcanvas.prf.min.js

https://cdnjs.cloudflare.com/ajax/libs/playcanvas/2.4.0/playcanvas.d.ts

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<canvas id='application-canvas'></canvas>

🧩 External JS
<script src="https://code.playcanvas.com/playcanvas-stable.min.js"></script>

⚙️ JavaScript
var canvas = document.getElementById('application-canvas');
var app = new pc.Application(canvas, {});
app.start();

app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

window.addEventListener('resize', function () {
    app.resizeCanvas();
});

var camera = new pc.Entity('camera');
camera.addComponent('camera', {
    clearColor: new pc.Color(0.1, 0.1, 0.1)
});
app.root.addChild(camera);

camera.setPosition(0, 0, 3);

var box = new pc.Entity('box');
box.addComponent('model', {
    type: 'box'
});
app.root.addChild(box);

app.on('update', function (dt) {
    box.rotate(10 * dt, 20 * dt, 30 * dt);
});