Avans asked Dept to create a digital substitute for their Open Days. Since Dept recently created a 3D digital festival, they shifted some focus to include more 3D on the web. That’s where we came in. Level30Wizards has been experimenting and working with this rather new technology since it’s been possible. In cooperation with Dept Agency and Avans Hogescholen, we created a performant, accessible digital substitute for open days. Read on to see how we did it.
Avans Open Dagen
Every user that visits the digital Avans open day received a personalised link, with study sessions that they may be interested in. The user can then update or change their interests and will receive a personal schedule of cards with MS Teams meeting links, where they can attend sessions about a study.
We used a 3D model created by Dept in Cinema4D. We exported the model as a GLB file and converted it to JSX. React Three Fiber allows us to target parts of the model and add DOM elements within the model. Adding DOM (HTML) elements allowed us to make the canvas accessible. In Cinema4D we added animations which we then exported with the model, these animations can be added and controlled with React Three Fiber.
- GLB model
We added keyboard controls to use zoom, move and navigate on the map. We added button elements on top of the model’s 3D elements, this enables anyone to use the Tab key to navigate the canvas. This implementation is key to allow keyboard users to navigate on a canvas, before React Three Fiber it was extremely hard to combine HTML and canvas elements. We created a quality toggle that changes shadow map size, antialiasing and pixel ratio to ensure users have a smooth experience, since 3D can be hard on your device. Next to that we made sure we added aria labels where necessary, to increase clarity for users using assistive technology.
We made a lot of big impacting changes for performance. We set quality depending on GPU strength. We allow the user to change model quality which toggles shadow map size, antialiasing and pixel ratio. We swap a lot of duplicate elements within the model with Instances, to reduce model size. We run object minification with Draco and we reduce polygon amount by a lot.
- Quality settings
- Anti aliasing
- shadow maps
- object minification
- polygon reduction
With React Three Fiber we can target specific parts of a 3D model. That’s how we created hover animations. The hover animation also toggles a regular HTML button that shows some more information about the thing you’re hovering over.
Work with us.
We are experienced with everything on the web.
* Except for spiders.