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でのみ確認はしました