Skip to main content

Posts

Showing posts with the label webVR

Fast-Track Beginner’s Guide to Building VR and AR in Your Browser 2026

Have you ever looked at a Virtual Reality (VR) headset and thought, "I wish I could build something for that," only to be scared off by the mention of complex game engines, expensive hardware, or high-level coding? The landscape of digital creation has changed. You no longer need a massive workstation or a background in computer science to build immersive worlds. If you can write a few lines of basic HTML, you have everything you need to become a VR developer. By using A-Frame , an open-source web framework, and the power of modern browsers, your "playtime" can turn into a gateway to the Metaverse. Why WebVR? WebVR (and its modern successor, WebXR) is built on a simple philosophy: accessibility . Unlike traditional VR apps that require massive downloads, WebVR experiences are just links. They work on your laptop, your smartphone, and high-end headsets like the Meta Quest or Apple Vision Pro. In this guide, we have collated a series of experiments—originally shared b...
Post a Comment
Read more

Web AR Without the Faff: A Maker and Educator's Guide to AR.js Studio

Web AR Without the Faff: A Maker and Educator's Guide to AR.js Studio Augmented Reality used to mean expensive apps, locked-down platforms, and a steep learning curve that put most teachers and makers off before they'd even started. That's changed. With A-Frame , AR.js , and the no-code AR.js Studio , you can build a working web-based AR experience in about the same time it takes to make a cup of tea — and share it with nothing more than a URL. No app to install. No app store. Just a link. What Is Web AR, and Why Should You Care? AR.js Studio is an open-source platform for building augmented reality experiences that deploy straight to the web — meaning your audience won't need to download anything extra, and you don't need any coding knowledge to build them. Ar-js-org That matters enormously in education and maker spaces. The barrier isn't usually enthusiasm — it's the first five minutes of setup. Web AR sidesteps that entirely. The sweet spot for begi...
Post a Comment
Read more

TinkerCad microbit traffic light simulator (now with video)

Have you ever wondered how the traffic lights at the end of your street actually work? They aren’t just on timers; they are controlled by small computers. Today, we’re going to build and code our own traffic light system using a free online tool called Tinkercad . The best part? You don’t need to buy any expensive equipment. You can build the whole thing virtually on your computer. What is Tinkercad? Tinkercad is a free, web-based tool from Autodesk. While many people use it for 3D design, it also has a "Circuits" section where you can drag and drop electronic components—like batteries, LEDs, and micro-computers—to see if they work before building them in real life. The Project: The Micro:bit Traffic Light In this project, we use a BBC micro:bit (a pocket-sized computer) to control three lights: Red, Orange, and Green. To make this work, we connect the micro:bit to a "breadboard" (a plug-and-play board for electronics) or can get away with just wiring them togther ...
Post a Comment
Read more

Build yourself a Planet - Web VR

Using Mozzila's brilliant AFrame, a web-based Virtual Reality model of a planet with rings and include a moon with an image on it. Step 1. Basic Planet The first step is to set a new site in  Glitch.com  and then add a white sphere on a black background. <html>   <head>     <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>   </head>   <body>     <a-scene>      <a-sphere position="0 1.25 -5" radius="3" color="white" >       </a-sphere>          <a-sky color="black"></a-sky>     </a-scene>   </body> </html>     Using the Aframe 'tags' to create a white sphere and to create a black background Step 2: Rotate the planet and add some colour Now we can add a surface to the ...
2 comments
Read more

WebVR 4 Playtime: Putting Objects into Augmented Reality

In a previous post , I tried to persuade you that using A-Frame it is not too hard to use for some simple Augmented Reality (AR) for free, via a browser, but also runs on a mobile device. Well I going to continue and put objects with images imposed on them into this AR system - which could be quite a quick way to get an organisations logo into AR. Summary In the first post  WebVR playtime 1: Basics of setting up, images and rotating blocks ,  I looked at setting up a scene, rotating an object.   S econd pos t, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere.  The third post  started looking at using WebVR as part of an augmented reality solution building on the great resource  Creating Augmented Reality with AR.js and A-Frame  by Jerome Etienne, creator of AR.js. This gave us the starting code.  In this post, the ideas are extended further to adding or ...
2 comments
Read more