Compare in 3D
Viewer, approved 3D assets, device switching, colour variants, loading and error states.
Batuhan Boran / Solutions Engineer
Two assignments. One review.
A focused phone comparison concept for Three, followed by a dated QA report of the Binkies3D demo.UI/UX concept
Compare two phones in 3D.
Inspect an active pair side by side, understand the factual differences, then continue on Three.Preview state
| Difference | iPhone 17 Pro | Galaxy S26 Ultra |
|---|---|---|
| Dimensions | 150.0 x 71.9 x 8.75 mm | 163.6 x 78.1 x 7.9 mm |
| Display | 6.3 inch | 6.9 inch |
| Weight | 204 g | 214 g |
Enter, compare, continue.
The 3D moment supports a decision. It does not replace Three's catalogue or checkout.- Select
Choose two phones from a listing, or open the comparison with one phone already selected.
- Inspect
Keep up to four phones in a shortlist, but show only the active pair in the main viewer.
- Continue
Return to the canonical Three product page for configuration, availability, price and checkout.
Proposed integration boundary
One visual job with clear ownership and an honest fallback.Continue with this phone
Catalogue mapping, availability, price, plan, consent, analytics and checkout.
Validate first
Prove named Front, Side and Camera views with two real assets before expanding the catalogue.
- Visible controls and keyboard routes cover non-drag use.
- Reduced motion stops automatic rotation and repeated hints.
- Vertical intent scrolls the page on mobile.
- A failed viewer keeps the selected pair and the Three handoff.
Quality assurance
Four reproducible issues.
Samsung Galaxy S20+ integration tested against all 10 brief requirements on 29 Aug 2026.- Requirements
- 10
- Pass
- 6
- Issues
- 4
- Pending
- 0
| ID | Requirement | 1920 x 1000 | 375 x 812 |
|---|---|---|---|
| 01 | Automatic rotation on first load | PASS | PASS |
| 02 | Swipe-hand hint repeats until interaction | PASS | PASS |
| 03 | Left-button free rotation | PASS | PASS |
| 04 | Wheel zoom and right-button pan | PASS | PASS |
| 05 | Every colour opens the correct 3D asset | ISSUE | ISSUE |
| 06 | Fullscreen opens; X and ESC close it | PASS | PASS |
| 07 | Four thumbnails work and are not blurry | ISSUE | ISSUE |
| 08 | Nothing blocks 3D interaction | PASS | PASS |
| 09 | Both arrows reach every thumbnail in the shown direction | ISSUE | ISSUE |
| 10 | Page scrolls easily past 3D on narrow layout | N/A | ISSUE |
Cosmic Gray resolves to the Cosmic Black asset id
Observed: Cosmic Black and Cosmic Gray both expose data-id=samsung-galaxy-s20-plus-cosmic-black.
Fix and retest: Correct the approved label-to-asset mapping, then retest every visible colour at both required viewports.
The four clickable thumbnails are visibly soft
Observed: Each thumbnail measured 20 x 20 intrinsic and 20 x 20 CSS pixels at DPR 1. The small footprint and crop carry too little detail.
Fix and retest: Increase the footprint or tighten the crop, then render the backing source at the chosen CSS size multiplied by DPR.
The arrow artwork points in the wrong direction
Observed: From thumbnail 2, the visible right arrow selected thumbnail 1 and the visible left arrow selected thumbnail 3.
Fix and retest: Swap the handlers or artwork and retest previous, next and endpoint behaviour from all four thumbnails.
Vertical scrolling is trapped over the 3D stage
Observed: At 375 x 812, a 150 px vertical gesture over the model left scrollY at 382. The same gesture outside moved it to 532.
Fix and retest: Hand vertical intent back to page scrolling while preserving horizontal rotation, then repeat the test before and after 3D interaction.
Evidence from the dated run
The screenshots support the mapping, mobile scroll and arrow-direction findings.
Submission files
The live page is a companion to the two final PDF assignments.