plunkerでplaycanvas
1598 ワード
概要
plunkerでplaycanvasやってみた。
プリミティブを表示してみた。
写真
サンプルコード
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);
var cube = new pc.Entity();
cube.addComponent('model', {
//type: "box"
//type: "sphere"
type: "capsule"
//type: "cone"
//type: "cylinder"
//type: "plane"
});
var camera = new pc.Entity();
camera.addComponent('camera', {
clearColor: new pc.Color(0.1, 0.2, 0.3)
});
var light = new pc.Entity();
light.addComponent('light');
app.root.addChild(cube);
app.root.addChild(camera);
app.root.addChild(light);
camera.setPosition(0, 0, 3);
light.setEulerAngles(45, 0, 0);
var Rotate = pc.createScript('rotate');
Rotate.prototype.update = function(dt) {
this.entity.rotate(10 * dt, 20 * dt, 30 * dt);
};
cube.addComponent('script');
cube.script.create('rotate');
window.addEventListener('resize', function() {
app.resizeCanvas(canvas.width, canvas.height);
});
成果物
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);
var cube = new pc.Entity();
cube.addComponent('model', {
//type: "box"
//type: "sphere"
type: "capsule"
//type: "cone"
//type: "cylinder"
//type: "plane"
});
var camera = new pc.Entity();
camera.addComponent('camera', {
clearColor: new pc.Color(0.1, 0.2, 0.3)
});
var light = new pc.Entity();
light.addComponent('light');
app.root.addChild(cube);
app.root.addChild(camera);
app.root.addChild(light);
camera.setPosition(0, 0, 3);
light.setEulerAngles(45, 0, 0);
var Rotate = pc.createScript('rotate');
Rotate.prototype.update = function(dt) {
this.entity.rotate(10 * dt, 20 * dt, 30 * dt);
};
cube.addComponent('script');
cube.script.create('rotate');
window.addEventListener('resize', function() {
app.resizeCanvas(canvas.width, canvas.height);
});
以上。
Author And Source
この問題について(plunkerでplaycanvas), 我々は、より多くの情報をここで見つけました https://qiita.com/ohisama@github/items/4176ab195ad6ae0661f1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .