MonacaでPlayCanvasを動かしてみるまで

Monaca＋PlayCanvasで3D表示および音なるまでやってみました

Monacaとは

一言で言えば、ハイブリッドアプリ開発環境です
詳しくは
https://ja.monaca.io/
を見てください

PlayCanvasとは

HTML5ゲームエンジンです
https://playcanvas.jp/
WebブラウザでUnityにちょっと似てるUIで作成していくことができますが、エンジン部分がGitHubで公開されています
https://github.com/playcanvas/engine

導入

Monaca環境でプロジェクト作成(今回はなぜかVueテンプレート利用)

PlayCanvasのエンジン部分のソースを落とす

playcanvas-stable.min.jsをsrcフォルダにアップ

ついでに鳴らしたい音をwww直下にアップロード(今回はfanfare.mp3っていうフリー素材利用)

playcanvas-stable.min.jsのソースをいじる

18行目付近にあるこの部分をコメントアウト

playcanvas-stable.min.js

//  window = _window || window;
//  navigator = _navigator || navigator;

app.vueを編集

app.vue

<template>
    <v-ons-page>
      <v-ons-toolbar>
        <div class="center">{{ title }}</div>
        <div class="right">
          <v-ons-toolbar-button>
            <v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
          </v-ons-toolbar-button>
        </div>
      </v-ons-toolbar>
      <div style="text-align: center; padding-top:10px">Hello World!</div>
      <p style="text-align: center">
        <v-ons-button @click="alert">Click Me!</v-ons-button>
      </p>
      <canvas ref='application'></canvas>
    </v-ons-page>
</template>
<script>
  import pc from 'playcanvas-stable.min.js';
  export default{
    data() {
      return {
        title: 'My app'
      };
    },
    methods: {
      alert() {
        this.$ons.notification.alert('This is an Onsen UI alert notification test.');
      }
    },
    mounted: function() {
      // create a PlayCanvas application
      let canvas = this.$refs.application;
      console.log(canvas);
      let app = new pc.Application(canvas, { });
      app.start();

      // fill the available space at full resolution
      app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
      app.setCanvasResolution(pc.RESOLUTION_AUTO);

      // ensure canvas is resized when window changes size
      window.addEventListener('resize', function() {
          app.resizeCanvas();
      });

      // create box entity
      let cube = new pc.Entity('cube');
      cube.addComponent('model', {
          type: 'box'
      });

      // create camera entity
      let camera = new pc.Entity('camera');
      camera.addComponent('camera', {
          clearColor: new pc.Color(0.1, 0.1, 0.1)
      });

      // create directional light entity
      let light = new pc.Entity('light');
      light.addComponent('light');

      // add to hierarchy
      app.root.addChild(cube);
      app.root.addChild(camera);
      app.root.addChild(light);

      // set up initial positions and orientations
      camera.setPosition(0, 0, 3);
      light.setEulerAngles(45, 0, 0);

      // audio
      let asset = {
          url: "fanfare.mp3",
          type: "audio"
      };
      app.assets.loadFromUrl(asset.url, asset.type, function (err, asset) {
        let audioEntity = new pc.Entity();
        audioEntity.addComponent('sound');
        audioEntity.addComponent("audiolistener");
        // add footsteps slot
        audioEntity.sound.addSlot('footsteps', {
            asset: asset,
            pitch: 1.7,
            loop: true,
            autoPlay: true
        });
        app.root.addChild(audioEntity);
      });

      // register a global update event
      app.on('update', function (deltaTime) {
          cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
      });
    },
  };
</script>

結果

MonacaDebuggerでも動くのを確認

※Androidしか持ってないのでAndroidでのみ確認はしました