3D & WebGL.

With 3D in the browser, products can be viewed from every side, variants configured live and complex technology explained clearly. It suits online shops, product pages and trade fair presentations, and runs on computers and smartphones without extra software.

Product presentation in 3D

01 / 05 · Work · JuCad Carbon Travel Special

A golf trolley in the browser.

I implemented this trolley as a 3D model for JuCad, with materials and animation. What you see is not a video: your browser draws the model itself.

02 / 05 · Materials

From every side.

The trolley can be viewed in 360°. Carbon, metal and rubber each have their own material values and catch the light differently.Carbon, metal and rubber each have their own material values and catch the light differently.

03 / 05 · Configuration

Accessories in their place.

A product configurator shows accessories right on the model. Here a JuCad golf bag settles exactly into place, on the trolley’s two holders.A product configurator shows accessories right on the model, such as a golf bag on the trolley’s holders. That is the foundation for product configurators that work.

04 / 05 · Load time

Light enough for a phone.

Thanks to good compression, the model loads quickly on your phone, even on the go. It loads only when it’s needed, and your browser draws only while something moves.

05 / 05 · Animation

Down to pack size.

The animation is part of the model: wheels detached, frame folded, until the trolley reaches its pack size. The button below puts it back together.

What’s included

Product configurators

Variants, materials and dimensions change live on the model. Price and availability come straight from your shop.

Interactive scenes

Elaborate opening scenes, 3D sequences that follow your scrolling, and spatial data visualizations in your brand’s look.

Shaders & effects

Custom-built effects for particles, distortions and transitions, like the header of this website. They run directly on the graphics processor, so they stay smooth.

Models for the web

Models from Blender or from your CAD data, simplified and compressed so they load quickly on a smartphone too.

Tools
Three.jsReact Three FiberGLSLWebGL2BlenderglTFDracoGSAP
Work

In practice.

Screenshot of SpaceSnake
01SpaceSnake 3D browser game · side project
Screenshot of JuCad
02JuCad Shopware shop, 3D & configurator
01 / 02

SpaceSnake

3D browser game · side project · Game idea, 3D, development

The snake classic as a 3D browser game, with power-ups that help you out of tight spots. Runs smoothly on smartphones too.

What I did
Game logic and controls
Power-ups to collect and use
Custom shaders for glow and particles
Three.js · R3F · GLSL
Screenshot of SpaceSnake
01SpaceSnake
3D browser game · side project · Game idea, 3D, development

The snake classic as a 3D browser game, with power-ups that help you out of tight spots. Runs smoothly on smartphones too.

Game logic and controls
Power-ups to collect and use
Custom shaders for glow and particles
Three.js · R3F · GLSL
Screenshot of JuCad
02JuCad
Shopware shop, 3D & configurator · Responsible for the shop system

Online shop of a maker of golf trolleys and accessories, in eight languages. After years of looking after the old shop, I carried out the move from Shopware 5 to Shopware 6 and have been responsible for the whole shop system since.

Migration from Shopware 5 to Shopware 6
Caddy finder and caddy configurator
3D models of the caddies on the product pages
Automated XML export for the ERP system
Careers and service pages
Shopware 6 · Twig · WebGL
Insights (German) · 4 min 3D im Browser: Wann lohnt sich ein Produktkonfigurator? Bei Produkten mit vielen Varianten veranschaulicht ein interaktives 3D-Modell, was Fotos nicht zeigen können. Worauf es bei Planung, Daten und Ladezeit ankommt.
Questions

Yes, if it’s planned for that from the start. Lean models, compressed textures and a display quality that adapts to the device keep it smooth.

Not necessarily. I work with CAD data, existing models or build simple ones myself in Blender.

You are leaving this website.