VR & AR development

How this works: a guide for students

This page uses Three.js and WebXR to display a 3D model (A.glb) in the browser, with support for virtual reality (VR). Below is a simple explanation of how the code works and what each part does, so you can learn how to build your own 3D and VR projects.

• Three.js library — JavaScript for 3D graphics in the browser: objects, lights, camera.
• Scene, camera, renderer — The scene is the 3D world; the camera defines the view; the WebGL renderer draws to the screen.
• Loading the 3D model — GLTFLoader loads A.glb (place it next to this HTML file). The model is scaled and centred, then added to the scene.
• Lighting — Ambient and directional lights so the model is visible.
• Orbit controls — On desktop, drag to orbit the model (OrbitControls).
• WebXR for VR — XRButton adds “Enter VR” when supported.
• Animation loop — Updates controls and renders each frame.
• HTTPS or localhost — WebXR needs a secure context (HTTPS or local dev server).

Try it out! Replace A.glb with your own model. Use the browser console (F12) if loading fails. See the Three.js documentation for more.