PCPartPiXR

Picking your PC parts in XR

Comment

Inspiration

Inspired by the PCPartPicker website (https://pcpartpicker.com/). I've loved this website since I first began my interests in computers. The ease with which you can create builds and see how well they work was a big deal for my young imagination. For this project, I decided to pair it with PICO's WebSpatial SDK to create an XR port for the website, allowing users to get more hands-on with the parts they want to put in their projects.

What it does

PCPartPiXR spatial computing demo built with the WebSpatial React SDK. You browse PC components in floating panels, preview each part as a 3D GLB model, assemble a full eight-slot build (CPU, motherboard, GPU, RAM, storage, cooler, PSU, case), and when the build is complete you can spawn a combined gaming PC model in the scene and move it with spatial (or pointer) drag.

How I built it

PCPartPiXR was made from the ground up for PICO's WebSpatial SDK. I used their well put together docs to create a simulation that runs HTML and CSS as spatial tiles in their PICO Emulator. Here's the tech stack for those interested: Core Tech React 19 + TypeScript — component-based UI Vite — build tooling @webspatial/react-sdk — enables visionOS floating panels, spatial drag, and 3D volumetric containers; falls back gracefully in regular browsers Three.js / @react-three/fiber / @react-three/drei — 3D GLB model rendering with orbit controls App Structure src/data/pcComponents.json — part catalog with specs, prices, and model URLs src/types/pc.ts — TypeScript interfaces src/utils/webspatialRuntime.ts — detects whether the app is running in a WebSpatial (visionOS) environment src/components/ — all UI: PCBuilder (main state), ComponentSelector (tab-based catalog), ComponentInfo (specs), ComponentModelPreview (3D preview), BuildList (cart/total), SpawnedFullPcModel (full assembled PC), SpatialPanel (reusable spatial tile) public/models/ — 9 GLB model files (~42 MB) cloudflare tunneling to remote run the emulator

Challenges I ran into

The biggest challenge was figured out the PICO emulator. The first few hours of this hackathon were spent trying to launch the sample project, and the issues didn't stop there. I learned a lot more about web design than I thought I would for this project. I finally understand the difficulties that come with web design.

Accomplishments that I'm proud of

Having a finished product in general. I started this hackathon halfway through and I'm proud to have a presentable project. I am also proud of the amount of web design that I learned through this project. Additionally, learning the PICO SDK was something I'm proud of.

What I learned

See above, PICO SDK/SpatialWeb, basic web design, three js, npm scripting, Github codespaces, cloudflare tunneling

What's next for PCPartPiXR

Actual integration with a PCpartpicker scraper and some way of creating 3d models of every pc part ever.

Built With

Share this project:

Updates

posted an update —

Models used can be found and credited here:

Case: https://sketchfab.com/3d-models/corsair-4000d-pc-case-bc15e007d6634579bc0e8ffdf238e665 CPU: https://sketchfab.com/3d-models/amd-ryzen-7-5700x3d-f65c7a88018c4e9ab9de319558f75e32 PSU: https://sketchfab.com/3d-models/m1000-inspired-by-corsair-hx1000-free-6d122273398b446a876600401ba08b55 Motherboard: https://sketchfab.com/3d-models/msi-b550-gaming-plus-a7f6a35bca4a4d01a010a6b8ded6bc93 RAM: https://sketchfab.com/3d-models/kingston-hyperx-fury-black-ram-module-3d9499b5337f475d8bbb1eccdb20e73d Storage: https://sketchfab.com/3d-models/m2-nvme-ssd-samsung-990-pro-1tb-3d-model-41b7bfda7eab40f8b13330913fd66fc2 GPU: https://sketchfab.com/3d-models/asus-rog-geforce-rtx-4090-v20-6f527569f14b4efc94c7072842bd41ac CPU cooler: https://sketchfab.com/3d-models/cpu-cooler-672a0a74a98c452a862016bee99f3579

Log in or sign up for Devpost to join the conversation.