Robots and Physical Computing

Posts

Showing posts with the label webVR

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...

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 ...

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 ...

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 ...

WebVR 3 Playtime: Augmented Reality

I am going to try to persuade you that using A-Frame it is not hard to do some simple Augmented Reality (AR) for free, via a browser, but that also can run on a mobile device. Introduction This is part of a short series of articles about some experiments with WebVR Web-based Virtual Reality - in this case based on the wonderful A-Frame ( https://aframe.io ) . In the first post WebVR playtime 1: Basics of setting up, images and rotating blocks , I looked at setting up a scene and then rotating an object. In the second pos t, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere. In this post we are going to start looking at using WebVR as part of an augmented reality solution. I going to start by building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js - the starting code below and the basis of the solution ...