Project description:
Interactive animations invite visitors of your website to be curious and actively explore your product, premises or service. This means that the customer is already interacting and the first hurdle to further interaction, for example contacting you, is significantly lower.
The Catholic Parish of St. Wendelin Hotzenwald makes use of this advantage by offering an insight into the church building through a clickable animation. Interested people know what to expect before they visit the church for the first time and are already familiar with it without ever having been there.
The process
In the first step, we recreated the church building 1:1 in the 3D program thanks to the dimensions provided. We then created objects such as benches, altar and decoration, textured all the models and assigned the appropriate materials. We then animated the chairs for the circle of chairs, since those are the only objects that move. Otherwise, only the camera moves. In the final step, we created just these camera moves and rendered the video at 30 fps.
From animation video to clickable animation
In Javascript, we programmed the interactive animation using keyframes, which we placed at the appropriate points in the video. With a click on one of the buttons, the video starts at the desired point. Since each camera movement starts at the same starting point, the animation works seamlessly, without any visible cuts. To enable the animation to be played on our client’s website, we created a WordPress plug-in that can be used on any WordPress website.
Clickable elements include the altar, the large cross on the wall behind the altar, the labyrinth on the floor and the baptismal font. Next to the video (desktop) or below it (mobile), an associated descriptive text with background information appears.
Note: Since the new church website is currently under construction, we have temporarily resorted to placeholder text.
