VR-Based Computer Hardware Learning Application

(WebXR + Three.js)

An interactive WebXR-based learning application for exploring computer hardware in 3D. Developed using Three.js and WebXR with the Multimedia Development Life Cycle (MDLC) methodology, this application enables learners to study computer hardware components interactively through an immersive browser-based experience — without requiring expensive VR devices.

Features

Interactive 3D visualization of computer hardware
Web-based VR mode (WebXR)
Audio narration using AI-generated voice
Lightweight, optimized 3D rendering (Draco + KTX2 compression)
Responsive controls for desktop and VR devices

Tech Stack

Category	Tools / Frameworks
3D Engine	Three.js
XR Support	WebXR API
Optimization	glTF-Transform, Draco, KTX2
Modeling	Blender
Audio	GPT-SoVITS (AI TTS), YouTube Audio Library
Hosting	Cloudflare Pages / GitHub Pages

Development Workflow

3D modeling in Blender (±20% vertex reduction)
Export as .glb format
Optimize using glTF-Transform
- optimize (simplify structure)
- draco (geometry compression)
- ktx2 (texture compression)
Integrate into Three.js + WebXR
Test and deploy on the web

Credits & Licensing

3D Models

Model	Source	3D Artist / Modeler
Monitor	Sketchfab	BlendedPopcorn
Keyboard	CGTrader	autho
Mouse	Sketchfab	Mukhesh
Printer	Sketchfab	zafry
Storage	Sketchfab	Хлюпич
Motherboard	Sketchfab	Daniel Cardona
CPU	Sketchfab	Igor.Jop
Network Interface Card	Sketchfab	ARComputerFundamentals
GPU	Sketchfab	Daniel Cardona
RAM	Sketchfab	Daniel Cardona
Flash Drive	Sketchfab	Blender3D
Avatar	Sketchfab	victorcalles
Room	Sketchfab	Maxim Mavrichev
Interior	Sketchfab	Murat Can ÜNAL

Note: All 3D models are used under their respective licenses. Attribution is provided according to platform requirements.

Audio & Voice

Source	Description
GPT-SoVITS	Voice narration
YouTube - BreakingCopyright	Background music
Pixabay	Sound effects

Tools & Frameworks

Three.js – 3D rendering engine
WebXR – Browser-based VR/AR support
glTF-Transform – Model optimization CLI
Blender – 3D modeling and asset preparation

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this project for educational or non-commercial purposes, provided that all attributions and credits remain intact.

Acknowledgments

Special thanks to:

All creators on Sketchfab and CGTrader who have provided high-quality 3D models.
GPT-SoVITS for AI voice narration.
The open-source community of Three.js and WebXR developers.

Authors

Falachul Akhadihima Ibrahaical, Paulus Lucky Tirma Irawan, Bita Parga Zen

Thesis Project — IMPLEMENTATION OF THREE.JS AND WEBXR IN DEVELOPING A VIRTUAL REALITY (VR) APPLICATION FOR INTRODUCING COMPUTER HARDWARE
Informatics Engineering
Faculty of Technology and Design, Ma Chung University

Undergraduate Research Project

Progress Found

WebXR Computer Lab.