PlayCanvas and Vue.js

Hi all,

after a longer journey I want to present you my integration of PlayCanvas engine and VUE.js.
See my GitHub repo here:

And a live Demo on Netlify here:
https://playcanvas-vue.netlify.app/

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 :slight_smile:

Regards,
Ingo

8 Likes

Thank you for sharing, Ingo :+1:

2 Likes

This is super-cool. I recommend you add it here:

Also, if you happen to be on Twitter and compose a tweet about this, I can amplify it for you.

2 Likes

@will I added the repo the awesome-playcanvas, see Pull Request With the Twitter I get in touch with you. Thanks!

@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?

Thanks a lot!

My Boilerplate can also handle more complex scenes :slight_smile:

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

1 Like

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.

1 Like

Hi all, I have added Tween.js support to my project based on this PR:

See a Live Demo here on Netlify:
https://playcanvas-vue.netlify.app/#/tween

3 Likes

Project has been updated to the latest PlayCanvas engine https://github.com/playcanvas/engine/releases/tag/v1.35.3

Live Demo: https://playcanvas-vue.netlify.app/#/playcanvas

1 Like

Hi @iso74

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.

Thanks

Hi @mr-jose, No state for Canvas for now is stored, but you can add it to VUEX of course.
For now current Application and current scene is stored.

1 Like

Info: The project was updated to use the latest PlayCanvas engine v.1.36.1

1 Like

Hi @iso74,

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?

Many thanks

1 Like

Hi @mr-jose,

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.

Maybe I did not get your question fully… :frowning:

Hi @iso74

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?

Thanks

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.

Thanks @iso74.

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.

Thanks

1 Like

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?)

2 Likes