Unpacking the field notes…
Unpacking the field notes…
DWG Nº 01 · blueprint
EXP-01 · iHAVECPU
จัดสเปกคอมแล้วเห็นเครื่องประกอบเป็น 3D
An interactive 3D builder where customers watch the parts they pick come together into a full PC build, with compatibility checks built in.
01
Frontend and 3D: scene, interaction, compatibility logic and performance.
Choosing PC parts from a list is abstract. Customers wanted to see their build, but 3D on an e-commerce site has to stay fast on ordinary phones and must never let someone buy parts that don't fit together.
02
Stack: Three.js, React Three Fiber, drei
A Three.js scene in React Three Fiber where each selected part animates into the case with GSAP, so the build grows as you shop.
Lazy-load the 3D, adapt render resolution to the device and pause rendering when nothing moves.
When the motherboard changes, RAM, M.2 and GPU picks are re-checked and auto-adjusted, with an undo notice so the customer stays in control. Race conditions when switching categories were tracked down and fixed.
An opt-in device check reads CPU threads, RAM and GPU hints and runs a tiny benchmark to tell customers how smoothly 3D mode will run. A privacy notice comes first, nothing leaves the browser, and it was designed with Thailand's PDPA in mind.
03
A builder customers can actually see, that stays smooth on everyday devices and keeps their parts compatible.
Next expedition →
Checkout & Payments