How to Build a Simple WebVR Panorama with CSS 3D and Three.js

Introduction

During the pandemic, the need for remote interaction accelerated the adoption of VR for real‑estate viewing, prompting the development of lightweight WebVR solutions such as Web panoramas. This guide walks through creating a simple 3DOF Web panorama.

What Is VR

Virtual Reality (VR) simulates a three‑dimensional world on a computer, providing immersive visual and sensory experiences that make users feel present in a virtual space.

VR Principles

Human depth perception relies on projecting a 3D scene onto a 2D retina. VR leverages this by presenting images with correct perspective cues, allowing a flat display to convey a sense of depth.

Application Scenarios

Beyond gaming and film, VR is used in real‑estate, military training, sports broadcasting, automotive configuration, medical therapy, and education. WebVR offers a low‑barrier entry point, though content creation remains costly.

WebVR Capabilities

WebVR supports two interaction degrees of freedom: 3DOF (rotation only) and 6DOF (rotation + position). 3DOF is suitable for fixed‑point panoramas like virtual house tours, while 6DOF enables full‑room experiences at higher implementation cost.

Development Approach

Implementing a Web panorama involves (1) building a 3D scene, (2) constructing the panorama framework, (3) applying textures, and (4) adding user interaction.

CSS 3D Implementation

Key CSS properties are transform-style (set to preserve-3d), perspective (controls depth strength), and transform (positions and rotates slices). Two nested containers each need transform-style to enable proper 3D rotation.

const position = parseInt(-width * (planeNum - i - 1), 10)

Slices are arranged around a central point, forming a cylinder or cube that approximates a sphere when enough slices are used. Texture mapping uses background-image and calculated background-position for each slice.

Three.js Implementation

Three.js provides a full 3D engine with objects: Scene, Camera, WebGLRenderer, SphereGeometry, and MeshBasicMaterial. The camera can be orthographic or perspective; for realistic depth a PerspectiveCamera is preferred.

camera.position.set(camerax, cameray, cameraz)
camera.lookAt(scene.position)

document.body.appendChild(renderer.domElement)

renderer.render(scene, camera)

The sphere mesh combines SphereGeometry with a basic material; adjusting material.opacity and material.transparent enables visibility toggling for multi‑scene transitions.

Interaction Handling

User interaction is captured via mouse, keyboard, or touch gestures. The workflow records start, move, and end phases, converting gesture deltas into rotation angles. To avoid abrupt motion, an inertia animation (e.g., using GSAP) adds easing at the start and end of the interaction.

// current swipe speed
const vx = (originalEndX - startX) / duration
// estimated end position
const endX = vx * 200

Challenges

Acquiring seamless, high‑resolution panorama images is difficult; suitable images are often watermarked, low‑quality, or require paid services. Capturing such images demands specialized equipment and expertise, raising production costs.

Future Outlook

VR is still in an early adoption phase, with content creation costs and hardware availability limiting widespread use. Advances in AI, 5G, and lower‑cost hardware are expected to expand VR applications across consumer and enterprise domains.