Irina GrigorevaWeb development
Discuss a project
Discuss a project
All projects

08 · Creative development · Personal · Open source

Interactive 3D Product Landing

An interactive product landing page with a Blender/GLB model, Three.js rendering, mouse/touch interaction and responsive animation.

Live demo
Role
Creative development: 3D model, rendering, interaction and animation.
Stack
  • Nuxt
  • Vue 3
  • Three.js
  • WebGL
  • Blender
Landing page with a rotatable 3D aircraft model

Challenge

Make a 3D model the hero of the page while keeping it fast to load and equally good with a mouse and on touch screens.

Solution

  • 01 Model prepared in Blender and exported to GLB.
  • 02 Three.js rendering inside Nuxt.
  • 03 Mouse and touch rotation with responsive animation.
Model catalogue and features section

Result

A live demo: the model can be rotated on desktop and on mobile.