VueJS+OnsenUI 환경을 PlayCanvas로 만들어봤습니다.

【Hanson】Vue。PlayCanvas에서 js를 사용하여 3D 모형화 웹 페이지 만들기
공식(?)PlayCanvas의 VueJS 환경 구축을 가르쳤습니다. VueJS + OnsenUI 환경도 시도해 볼 수 있을 것 같습니다.

총체적

이런 느낌은 루트 인덱스에js를 추가하여 index를 추가합니다.html 및 OnsenUI에 필요한 2개의 CSS가 설정되어 있습니다.
index.js

/*jshint esversion: 6, asi: true, laxbreak: true*/

const Index = pc.createScript('index');

Index.attributes.add("VueHtml", {type:"asset", assetType:"html"}); // 登録したhtmlを取得
Index.attributes.add("OnsenUICss", {type:"asset", assetType:"css", array: true});

// initialize code called once per entity
Index.prototype.initialize = function() {
//    var self = this; // this書き換え
    const wrapper = document.createElement("div"); // div作成
    wrapper.classList.add("wrapper"); // 作成したdivにwrapperというclass名を指定
    wrapper.innerHTML = this.VueHtml._resources[0]; // 事前に登録していたhtmlをwrapperに流し込み
    document.body.appendChild(wrapper); // bodyにwrapperを追加

    // CSS
    const cssElement = document.createElement("style");
    this.OnsenUICss.forEach((css) => {
        cssElement.innerHTML = css._resources[0];
        document.head.appendChild(cssElement);
    });

    // VueJS
    const app = new Vue({ // Vue呼び出し
        el: '#app', // id名がappの要素を参照
        template: '#main',
        data() { // 使用するdataを登録
            return({
            });
        },
        methods: { // イベントハンドラ作成
        }
    });

    // canvasを取得
    const canvas = document.getElementsByTagName("canvas")[0]; // canvasを取得
    canvas.classList.add("pcCanvas"); // canvasにclass名を指定

    // canvasを移動
    const canvasInsert = document.getElementById('canvas_insert');
    canvasInsert.appendChild(canvas);
};

// update code called every frame
Index.prototype.update = function(dt) {

};

// swap method called for script hot-reloading
// inherit your script state here
// Index.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

index.html

<template id="main">
    <v-ons-page>
        <!-- PlayCanvasのcanvas移動先 -->
        <div id="canvas_insert"></div>

        <p style="text-align: center">
            <v-ons-button @click="$ons.notification.alert('Hello World!')">
                Click me!
            </v-ons-button>
        </p>
    </v-ons-page>
</template>

<div id="app"></div>

onsenui.css는 OnesnUI용 CSS
onsen-css-components.min.css는 OnesnUI 구성 요소용 CSS
복사
ExternalScript에서
- https://cdn.jsdelivr.net/npm/vue
- https://unpkg.com/onsenui/js/onsenui.min.js
- https://unpkg.com/[email protected]/dist/vue-onsenui.js
의 길이, 메트릭 및 안내선 속성

이런 느낌으로 VueJS + OnsenUI로 이동했습니다.