plunkerでplaycanvas その2

概要

plunkerでplaycanvasやってみた。
gltfをアニメーション表示してみた。

参考にしたページ。

写真

サンプルコード

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 gltf;
var url = "https://rawcdn.githack.com/pissang/claygl/c4f45119/example/assets/models/SambaDancing/SambaDancing.gltf";
var filename = url.split('/').pop();
app.assets.loadFromUrlAndFilename(url, filename, "container", function(err, asset) {
  var resource = asset.resource;
  gltf = new pc.Entity('gltf');
  gltf.addComponent('model', {
    type: "asset",
    asset: resource.model
  });
  if (resource.animations && resource.animations.length > 0) 
  {
    gltf.addComponent('animation', {
      assets: resource.animations.map(function(asset) {
        return asset.id;
      }),
      speed: 1
    });
  }
  app.root.addChild(gltf);
  if (camera) 
  {
    var orbitCamera = camera.script.orbitCamera;
    orbitCamera.focus(gltf);
    var distance = orbitCamera.distance;
    camera.camera.nearClip = distance / 10;
    camera.camera.farClip = distance * 10;
  }
});
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(camera);
app.root.addChild(light);
camera.setPosition(0, 0, 300);
camera.lookAt(0, 100, 0);
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);
});

成果物

以上。