Template: Ionic to PlayCanvas

This a PlayCanvas template project to load Ionic applications in your project.

What is Ionic? Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. It is open-source and uses Cordova for mobile deployment. With the advent of PWA (Progressive Web Apps) Ionic supports deployment in web browsers and can be used as an excellent UI library for 3D apps that require heavy duty interfaces.

Check a list of the components available: http://ionicframework.com/docs/components/

Ionic is based on Angular 3/4 and uses Typescript. The exported Javascript code can be used out of the box with PlayCanvas.

https://playcanvas.com/project/511968/overview/ionic-to-playcanvas

This project provides a single script that loads the Ionic files (js, css, fonts and images) and bootstraps the app.
Also it provides a sample integration between Ionic <-> PlayCanvas with events calling.

The properties of the script provide guidelines on how to upload the required Ionic files from your ionic build export.

Of course it would be far simpler to export your PlayCanvas project and inject it in Ionic. The ability though to load it and use it through the PlayCanvas editor can be quite useful for several use cases.

A tutorial will follow on how to work with this.

4 Likes

You can read the integration tutorial here.

Enjoy!

1 Like