🔥 FLAME: Facilitating Learning with Animation and Multimedia Engagement 🔥

HTML templates to illustrate basic usage of Model-Viewer to display animated 3D models

FLAME is a SATLE funded project bringing interactive 3D to teaching and learning

The links below will bring you to seperate demo pages. See the corresponding html files in the project repository to view the source code.

Demo 1 shows the basic steps in adding a 3D model to a web page.

Demo 2 shows a model with a simple animation and multiple materials and textures. An Augmented Reality button allows you to view the model on a mobile device.

Demo 3 features a more complex animation created using rigid body constraints. These are converted to keyframed before exporting to glb format. A play/pause button is inplemented in JavaScript.

Demo 4 Illustrates a turbocharger compressor. The sweep angle of the blades can be adjusted with a slider.

Demo 5 uses JavaScript to adjust the base colour of the model's material as a function of the animation time. A HDRI background is used to give a photorealistic appearance.

Demo 6 demonstrates how multiple animation tracks can be independently controlled via JavaScript.

Demo 7 a simple slider example as demonstated in the JavaScript lesson.

Focus Group Demo Comparing a 2D image of the human heart to an interative 3D model.

FLAME Workshop Showcase

You can view some of the projects developed during the FLAME Workshop HERE.

SATLE – the Strategic Alignment of Teaching and Learning Enhancement Funding in Higher Education – is a €6.4m funding allocation administered by the National Forum in partnership with the Higher Education Authority to drive teaching and learning innovation and enhancement across the higher education sector. The 2022-2023 allocation is made up of a share of €5m base funding and an additional one-off 2022 addition, bringing the total fund to €6.4m. The funding will focus on innovations in education for sustainable development, digital transformation and academic integrity.
SATLE