Self-initiated commercial concept
Essence — Interactive Perfume Experience
A minimalist Three.js perfume concept that turns a tactile atomizer press into an atmospheric scent field around a lacquered bottle.
The concept
A fictional fragrance is introduced through a tactile product ritual. The 3D bottle remains the anchor while its cap, atomizer, perfume mist, and scent field move through four continuous states — Product, Reveal, Scent, and Atmosphere.
Where this approach can fit
Launches and campaign microsites for fragrance, cosmetics, jewellery, fashion, and other tactile products whose material character benefits from an art-directed realtime presentation.
Key interactions
- The supplied GLTF bottle is rendered in Three.js as deep burgundy lacquer with clearcoat, subtle iridescence, a generated paper label, and dedicated metal and cap materials.
- Pointer position and velocity shape a layered GLSL essence field while the bottle receives only restrained inertial parallax.
- A spring-driven cap reveal exposes the atomizer; pressing it moves the button and emits a pooled shader-based perfume plume.
- Spray droplets slow, drift, and feed a soft procedural scent field instead of becoming generic background decoration.
- Scroll blends the complete WebGL scene continuously from Product through Reveal and Scent to Atmosphere.
- Mobile rendering caps pixel density and particle count; reduced-motion keeps a composed product view and direct controls.
Implementation notes
This is a self-initiated portfolio concept, not a client case study. The product name, brand direction, label, environment, and interaction design were created for this demonstration and make no commercial claims.
The hero is a modular Three.js scene built around the supplied bottle model. Named meshes receive purpose-made physical materials, while the label is drawn at runtime and the warm studio environment is generated locally for dependable lacquer, clearcoat, and metal reflections. A material shader moves a controlled gloss-and-iridescence sweep across the bottle without turning the piece into a shader-debugging showcase.
The cap and atomizer use independent motion controllers. A press emits particles from the model’s nozzle marker into a narrow cone; drag and soft turbulence slow the plume before its energy carries into the procedural scent field.
Pointer input is smoothed with inertia and scroll is treated as a continuous scene parameter. Rendering pauses outside the viewport or when the tab is hidden, GPU resources are released during cleanup, and a static fallback remains available when realtime graphics cannot be shown.