What is the 3D star rating generator?
This abstract engine extrudes five-point stars into shallow badges, arranges them along a horizontal axis, and paints filled versus empty segments with independent MeshPhysicalMaterial responses. HDR skyline reflections, shared clearcoat polish, contact shadows, and gentle yaw motion translate testimonial scores into dimensional illustrations — then PNG export captures marketing-ready plates without Illustrator trace workflows.
How to tune ratings for conversion psychology
Follow these checkpoints before handing assets to developers or deck designers.
- 1
Lock star count before brand tint
Most commerce patterns assume five stars — raise count only when internal scorecards need ten-point scales translated visually.
- 2
Contrast empty stars against hero photography
Pale empty arms keep focus on filled segments; bump empty roughness when reflections compete with busy backgrounds.
- 3
Dial extrusion for slide versus favicon
Thicker extrusions read in keynote scale; shallow plates stay crisp when rasterized to small PNG badges.
- 4
Orbit, freeze mentally, export PNG
Pause drag when highlights align — supersampled exports reach a 3840 px long edge before restoring the live viewport.
Where 3D rating badges outperform flat SVG rows
Stylized depth cues communicate premium craft without commissioning 3D photography of physical trophies or medals:
E‑commerce PDP trust rows
Replace flat sprites with dimensional stars that echo metallic packaging without sourcing licensed photography.
SaaS testimonial heroes
PNG plates drop behind quoted copy when WebGL embeds are blocked by email clients or locked-down CMS.
App Store style pitch decks
Blue-gold presets mirror familiar marketplace cues while staying abstract enough for NDAs.
Employer review landing pages
Animated drift implies momentum — export stills for static Above the Fold when motion-reduced modes apply.
PNG export fidelity and supersampling
Captures read from the WebGL drawing buffer after an explicit render pass. When the split-view preview is smaller than print dimensions, the exporter can upscale toward a 3840 px long edge before restoring your viewport — ideal for retina keynote plates and wide PDP banners.
Accessibility and motion comfort
Spin and wobble can distract readers tracking numerals — reduce motion amplitudes when pairing with precise scores. Always expose the numeric rating in adjacent text for screen reader parity because decorative 3D stars are not semantic controls.
Craft tips for believable foil stars
Fine adjustments separate trustworthy badges from clip-art sparkle:
- Match slate backdrop (#f8fafc) to your section gutter so feathered edges blend without matte lines.
- If empty stars disappear on white cards, darken empty hex slightly instead of maxing environment intensity.
- Reduce wobble before exporting assets for audiences sensitive to oscillating motion.
- Inner point tightness near 0.42 mirrors classic browser glyph proportions.
Privacy-first WebGL merchandising art
Geometry never leaves the tab — helpful when agencies iterate on undisclosed retailer launches from shared coworking networks without uploading palette experiments to remote GPU farms.
Frequently asked questions
Do you support half-star ratings?
This generator uses whole stars for mesh clarity — composite vector halves in design tools if regulations require 4.5 visuals.
Why MeshPhysicalMaterial?
Clearcoat plus environment maps sell premium foil finishes without baking texture atlases.
Are uploads sent to a server?
No — extrusion and shaders compile locally inside WebGL.
Can I use PNG exports commercially?
Yes for pages, decks, and ads you ship; avoid implying endorsement by brands whose skylines appear only as HDR reflections.
Stars clip at extreme gap settings?
Yes — shrink gap or star size when stars overlap or leave the shadow catcher.