Touch Screen App: smart Configurator

Another example of the combination of high-quality 3D renderings with 3D graphics in real time

These types of apps are designed for local use e.g. for terminals in exhibitions. All views for a complete rotation of the object are pre-rendered and saved. In combination with the 3D capabilities of HTML5 / CSS3, interactive graphic elements can then be correctly overlaid in perspective. For this purpose, the data of the virtual camera of the 3D program are transferred in CSS3 styles.

In the present example there are 360 renderings of all color variants of the basic body, the tridion cell, the radiator grille and the roof. The renderings contain alpha channels and are overlaid in the browser. The rings for the selection of the respective colors are transformed in real-time via HTML5 / CSS3 and are user-interactive.

Date2016-01-16
Category3D Visualization
Screen Design
ToolsMaxon Cinema 4D
Adobe Dreamweaver
ClientDaimler AG
Technique 3D Rendering, HTML5/CSS3, JavaScript
Note Since the video on the left is a screen recording, it does not run smoothly in all sections.