Used Frameworks
- Google Closure for the main application structure and the javascript compiling: https://google.github.io/closure-library/api/index.html
- THREE as a WebGL rendering framework: https://threejs.org/
- Cannon (Cannon-es) for the 3D physic calculations: https://pmndrs.github.io/cannon-es/docs/
- GSAP for javascript animations https://greensock.com/docs/
- Swiper for the swipeable media gallery: https://swiperjs.com/get-started
- Howler for playing sound: https://howlerjs.com/
- Minibar for implementing a custom scrollbar: https://www.npmjs.com/package/minibarjs
- Formr for the creation of the backend https://formr.github.io/
Frontend Structure
Main entry point to the javascript application is the public/javascript/src/Application.js.
General stylings of the basic framework (navigation, page) or of basic recurring structures (layer, swiper) are defined public/scss/5-layout.
It will load all directly or general needed additional javascript libraries from public/javascript/src/net/libs.js
and will initialized all components which are defined in public/javascript/src/components.js.
Components (public/javascript/src/components) always have a visual reference to a specific dom element.
The whole exhibition is mainly managed by the Exhibition component.
The main dom template is located in app/views/index.php.
Usually there is a separate scss file for each component for the styling of the dom in public/scss/6-components (mobile first). All responsive customizations are listed in the corresponding ...-responsive.scss file.
Providers (public/javascript/src/provider), on the other hand, are singelton classes that make the same data and methods accessible from anywhere.
The communication with the backend is done by the ExhibitionProvider.
The services for the backend communication are defined in public/admin/Service.php.
In public/javascript/src/world, classes are defined that outsource and process purely virtual objects and processes of the 3D scene.
Controllers public/javascript/src/controller are instances that process interactions with the user and pass values and events.
Backend Structure
The backend is located in folder public/admin.
Dummy 3D data are available for viewing and initial maintenance under app/3d-backend.