Explore VR History and Build WebVR Scenes with A-Frame
This article traces the origins of virtual reality from early concepts and devices to modern headsets, then introduces the A-Frame web framework and provides a step‑by‑step tutorial with code examples for creating VR scenes, animations, and interactions in the browser.
What Is VR?
VR (Virtual Reality) creates a computer‑generated immersive world that tricks the senses, primarily vision, to make users feel present in a virtual environment, similar to the simulated reality depicted in "The Matrix".
One‑Minute VR History
Pygmalion's Spectacles (1935) – First sci‑fi description of a VR system with visual, auditory, and haptic components.
Sensorama (1962) – Invented by Morton Heilig, a multi‑sensory arcade‑style machine that simulated rides with 3D visuals, sound, wind, and scent.
The Sword of Damocles (1968) – Ivan Sutherland and Bob Sproull built the first head‑mounted display, a heavy device suspended from the ceiling.
Sega VR (1991‑1994) – Early commercial attempt that was cancelled despite a $200 price tag and a few demo games.
Virtual Boy (1995) – Nintendo’s red‑black 3D handheld that failed due to limited graphics, weight, and user discomfort.
Oculus Rift (2012) – Revitalized VR with low‑latency head tracking, leading to massive industry investment after Facebook’s $2 billion acquisition.
About A‑Frame
A‑Frame is an open‑source JavaScript framework released by Mozilla in December 2015 to simplify WebVR development. It lets developers use familiar HTML tags instead of low‑level WebGL APIs, supporting desktop, mobile, Oculus Rift, HTC Vive, and cardboard‑style devices.
Combines three.js and WebGL.
Custom HTML‑like tags are readable and declarative.
Cross‑platform: PC, mobile, and major headsets.
Reduces the learning curve for beginners.
Modular and extensible core.
Getting Started with A‑Frame
Below is a minimal example that creates a scene, sky, camera, basic primitives, animation, and cursor interaction.
1. Create a Scene
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="aframe-v0.3.0.js"></script>
</head>
<body>
<a-scene></a-scene>
</body>
</html>The <a-scene> element sets up the canvas, renderer, default camera, lighting, and WebVR polyfill.
2. Add a Sky
<a-scene>
<a-assets>
<img id="lake" src="lake.jpg">
</a-assets>
<a-sky src="#lake"></a-sky>
</a-scene>The <a-sky> tag defines a 360° background image, while <a-assets> preloads resources.
3. Add a Camera
<a-scene>
<a-entity position="0 0 3.8">
<a-camera></a-camera>
</a-entity>
</a-scene>The camera must be placed inside an <a-entity> to be positioned correctly.
4. Add Primitives
<a-scene>
<a-sphere position="0 1.25 -1" radius="1.25" color="#ef2d5e"></a-sphere>
<a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4cc3d9"></a-box>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#ffc65d"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7bc8a4"></a-plane>
</a-scene>position– X, Y, Z coordinates (meters). rotation – Euler angles. color – Hex color. depth, width, height, radius – Size attributes.
5. Add Animation
<a-scene>
<a-sphere position="0 1.25 -1" radius="1.25" color="#ef2d5e">
<a-animation attribute="scale" from="1 1 1" to="1.2 1.2 1.2" repeat="indefinite" direction="alternate" dur="2000"></a-animation>
</a-sphere>
<a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4cc3d9">
<a-animation attribute="rotation" from="0 45 0" to="0 360 0" repeat="indefinite" direction="alternate"></a-animation>
</a-box>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#ffc65d">
<a-animation attribute="height" from="1.5" to="0" repeat="indefinite" direction="alternate"></a-animation>
</a-cylinder>
</a-scene>Animation attributes mirror CSS3 animation: attribute, from, to, repeat, dur, direction, plus fill, delay, easing if needed.
6. Add a Cursor
<a-scene>
...
<a-entity position="0 0 3.8">
<a-camera>
<a-cursor color="#000"></a-cursor>
</a-camera>
</a-entity>
</a-scene>Attach a cursor component to the camera so users can interact by gazing or clicking.
AFRAME.registerComponent('cursor-listener', {
init: function () {
var COLORS = ["#6c8cbf", "#e4f0ff", "#6c70e1"];
this.el.addEventListener('click', function () {
var randomIndex = Math.floor(Math.random() * COLORS.length);
this.setAttribute('color', COLORS[randomIndex]);
});
}
});This component changes a box’s color randomly when clicked.
Community and Resources
A‑Frame has a vibrant community: over 3,500 GitHub stars, a Slack channel with ~1,400 members, weekly showcases on Twitter, and an active roadmap that promises tutorials and learning guides.
References
https://en.wikipedia.org/wiki/Virtual_reality
https://en.wikipedia.org/wiki/Sensorama
https://en.wikipedia.org/wiki/Sega_VR
https://en.wikipedia.org/wiki/Virtual_Boy
https://en.wikipedia.org/wiki/Oculus_Rift
http://aframe.io/
https://github.com/aframevr/aframe
https://twitter.com/aframevr
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Aotu Lab
Aotu Lab, founded in October 2015, is a front-end engineering team serving multi-platform products. The articles in this public account are intended to share and discuss technology, reflecting only the personal views of Aotu Lab members and not the official stance of JD.com Technology.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.