This project is a Boilerplate to kick off your PlayCanvas Vue.js application.
I oriented myself on the Editor export so it is possible to alnost copy & past scene JSON
and config to kick off a project which has been developed in the Editor.
PlayCanvas scripts can be easily converted to VUE Mixins which are then available application wide.
Of course this project is a proof of concept to help people using PlayCanvas with VUE and not ment as
a complete solution.
If you like it please give me a star on GitHub, if you like it even more feel free to start your first application with VUE.js
@will One more thing. I would love to add the “Powered by PlayCanvas” badge to the demo scenes. Can you provide info how todo this with engine only? And also provide the correct png, please?
This is really great. Thanks for sharing.
I’m currently doing a similar project where I create a Playcanvas Editor in Vue, similar to the original one.
And I see you solved several things more elegantly than me, so I might clone your repo and build on top of it. Will share it here soon. Cheers
Thank you @patriboz for your kind words, that keeps me going on what I am doing.
There will be also an update soon where I have integrated the Tween.js lib in a way @will did in his PR to the engine. Feel free to PN me or ask questions here.
Have you considered a method for retaining the state of a given canvas between page switches? I have explored options for overlaying dom elements or tactics such as turning off the camera, but the outcome and performance is mixed, certainly across a range of platforms and devices.
I’m looking to give this a spin, is it compatible with Vue 3? And what steps are needed for preparing a project? Is it through Publish > New Build or some other process?
by now it is Vue 2. What do you mean by new project?
It does not advice you to any needed steps, it is completly up to you how to structure your project in the end. to run a project use npm run serve, for production build it is npm run build.
Thanks for the reply. What I mean was the process of getting the scripts / assets out of the PlayCanvas editor. Looking at the boilerplate I can see this will be a substantial amount of work for an established project as, correct me if I am wrong, but the process is to download each of the individual scripts and assets from the editor and integrate them into Vue project through the use of mixins, and not use the publish / build feature in the PlayCanvas editor?
Hi @mr-jose, Ok yes thats how it is ment, scripts should be Mixins in the end and must be rewritten to fit this approach. Or you can completely keep the file structure from the Publish/Build in public folder, but then it is not so the vue way of course. I am not sure if my project is the right thing for already established hugh projects in the editor. Its maybe more ment to keep the Scene graph in sync with editor. You see it right that a substantial amout of work would be to adapt the scripts. All in all my approach is more a Engine only.
That has certainly cleared things up. I do think this is a better approach long term, and as you say the “Vue way”, especially for projects that sit within web sites and need to use the dom extensively. After I have wrapped up my current project in a few weeks I would like to pick this up again in view of adjusting the boiler plate to support Vue 3 and to explore methods of exporting data efficiently from the PlayCanvas editor.
You can use https://github.com/playcanvas/playcanvas-sync to get all the script files quite easily. I think you can get certain assets too but not sure what it’s limited to (e.g does it grab materials?)
