plunkerでplaycanvas その3
4161 ワード
概要
plunkerでplaycanvasやってみた。
物理エンジンやってみた。
参考にしたページ。
写真
サンプルコード
var canvas = document.getElementById("application-canvas");
var application = new pc.fw.Application(canvas);
application.start();
application.setCanvasFillMode(pc.fw.FillMode.FILL_WINDOW);
application.setCanvasResolution(pc.fw.ResolutionMode.AUTO);
application.context.scene.ambientLight = new pc.Color(0.1, 0.2, 0.3);
application.context.systems.rigidbody.setGravity(0, -9.8, 0);
function createMaterial(color) {
var material = new pc.scene.PhongMaterial();
material.diffuse = color;
material.update()
return material;
}
var white = createMaterial(new pc.Color(1, 1, 1));
var red = createMaterial(new pc.Color(1, 0, 0));
var green = createMaterial(new pc.Color(0, 1, 0));
var blue = createMaterial(new pc.Color(0, 0, 1));
var yellow = createMaterial(new pc.Color(1, 1, 0));
var floor = new pc.fw.Entity();
application.context.systems.model.addComponent(floor, {
type: "box",
});
floor.model.material = white;
floor.setLocalScale(10, 1, 10);
application.context.systems.rigidbody.addComponent(floor, {
type: "static",
restitution: 0.5
});
application.context.systems.collision.addComponent(floor, {
type: "box",
halfExtents: new pc.Vec3(5, 0.5, 5)
});
application.context.root.addChild(floor);
var light = new pc.fw.Entity();
application.context.systems.light.addComponent(light, {
type: "directional",
color: new pc.Color(1, 1, 1),
castShadows: true,
shadowResolution: 2048
});
light.setLocalEulerAngles(45, 30, 0);
application.context.root.addChild(light);
var camera = new pc.fw.Entity();
application.context.systems.camera.addComponent(camera, {
clearColor: new pc.Color(0.5, 0.5, 0.8),
farClip: 50
});
application.context.root.addChild(camera);
camera.translate(0, 10, 15);
camera.lookAt(0, 0, 0);
var boxTemplate = new pc.fw.Entity();
application.context.systems.model.addComponent(boxTemplate, {
type: "box",
castShadows: true,
enabled: false
});
application.context.systems.rigidbody.addComponent(boxTemplate, {
type: "dynamic",
mass: 50,
restitution: 0.5
});
application.context.systems.collision.addComponent(boxTemplate, {
type: "box",
halfExtents: new pc.Vec3(0.5, 0.5, 0.05)
});
boxTemplate.setLocalScale(1.0, 1.0, 0.2);
var part0 = new pc.fw.Entity();
application.context.systems.model.addComponent(part0, {
type: "box",
castShadows: true
});
part0.setLocalScale(1.0, 0.2, 1.0);
part0.setLocalPosition(0.0, 0.5, 0.0);
boxTemplate.addChild(part0);
var part1 = new pc.fw.Entity();
application.context.systems.model.addComponent(part1, {
type: "cylinder",
castShadows: true
});
part1.setLocalScale(0.2, 1.0, 1.0);
part1.setLocalPosition(0.5, 0.0, 0.0);
boxTemplate.addChild(part1);
var templates = [boxTemplate];
templates.forEach(function(template) {
template.enabled = false;
});
var timer = 0;
var count = 40;
application.on("update", function(dt) {
if (count > 0)
{
timer -= dt;
if (timer <= 0)
{
count--;
timer = 0.2;
var template = templates[Math.floor(pc.math.random(0, templates.length))];
var clone = template.clone();
clone.enabled = true;
application.context.root.addChild(clone);
clone.setLocalPosition(pc.math.random(-3, 3), 10, pc.math.random(-1, 1));
clone.rigidbody.syncEntityToBody();
}
}
});
成果物
var canvas = document.getElementById("application-canvas");
var application = new pc.fw.Application(canvas);
application.start();
application.setCanvasFillMode(pc.fw.FillMode.FILL_WINDOW);
application.setCanvasResolution(pc.fw.ResolutionMode.AUTO);
application.context.scene.ambientLight = new pc.Color(0.1, 0.2, 0.3);
application.context.systems.rigidbody.setGravity(0, -9.8, 0);
function createMaterial(color) {
var material = new pc.scene.PhongMaterial();
material.diffuse = color;
material.update()
return material;
}
var white = createMaterial(new pc.Color(1, 1, 1));
var red = createMaterial(new pc.Color(1, 0, 0));
var green = createMaterial(new pc.Color(0, 1, 0));
var blue = createMaterial(new pc.Color(0, 0, 1));
var yellow = createMaterial(new pc.Color(1, 1, 0));
var floor = new pc.fw.Entity();
application.context.systems.model.addComponent(floor, {
type: "box",
});
floor.model.material = white;
floor.setLocalScale(10, 1, 10);
application.context.systems.rigidbody.addComponent(floor, {
type: "static",
restitution: 0.5
});
application.context.systems.collision.addComponent(floor, {
type: "box",
halfExtents: new pc.Vec3(5, 0.5, 5)
});
application.context.root.addChild(floor);
var light = new pc.fw.Entity();
application.context.systems.light.addComponent(light, {
type: "directional",
color: new pc.Color(1, 1, 1),
castShadows: true,
shadowResolution: 2048
});
light.setLocalEulerAngles(45, 30, 0);
application.context.root.addChild(light);
var camera = new pc.fw.Entity();
application.context.systems.camera.addComponent(camera, {
clearColor: new pc.Color(0.5, 0.5, 0.8),
farClip: 50
});
application.context.root.addChild(camera);
camera.translate(0, 10, 15);
camera.lookAt(0, 0, 0);
var boxTemplate = new pc.fw.Entity();
application.context.systems.model.addComponent(boxTemplate, {
type: "box",
castShadows: true,
enabled: false
});
application.context.systems.rigidbody.addComponent(boxTemplate, {
type: "dynamic",
mass: 50,
restitution: 0.5
});
application.context.systems.collision.addComponent(boxTemplate, {
type: "box",
halfExtents: new pc.Vec3(0.5, 0.5, 0.05)
});
boxTemplate.setLocalScale(1.0, 1.0, 0.2);
var part0 = new pc.fw.Entity();
application.context.systems.model.addComponent(part0, {
type: "box",
castShadows: true
});
part0.setLocalScale(1.0, 0.2, 1.0);
part0.setLocalPosition(0.0, 0.5, 0.0);
boxTemplate.addChild(part0);
var part1 = new pc.fw.Entity();
application.context.systems.model.addComponent(part1, {
type: "cylinder",
castShadows: true
});
part1.setLocalScale(0.2, 1.0, 1.0);
part1.setLocalPosition(0.5, 0.0, 0.0);
boxTemplate.addChild(part1);
var templates = [boxTemplate];
templates.forEach(function(template) {
template.enabled = false;
});
var timer = 0;
var count = 40;
application.on("update", function(dt) {
if (count > 0)
{
timer -= dt;
if (timer <= 0)
{
count--;
timer = 0.2;
var template = templates[Math.floor(pc.math.random(0, templates.length))];
var clone = template.clone();
clone.enabled = true;
application.context.root.addChild(clone);
clone.setLocalPosition(pc.math.random(-3, 3), 10, pc.math.random(-1, 1));
clone.rigidbody.syncEntityToBody();
}
}
});
以上。
Author And Source
この問題について(plunkerでplaycanvas その3), 我々は、より多くの情報をここで見つけました https://qiita.com/ohisama@github/items/78022cbdd5b79c640598著者帰属:元の著者の情報は、元の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 .