Skip to main content

Posts

Showing posts with the label web VR

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

WebVR playtime 2: video, 360 video and objects

This is going to be 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 this post, I going to recap the basics, then look at adding video, 360 degree video, and models developed elsewhere. 1. The approach and setting up I chose to use A-Frame ( https://aframe.io )  inside Thimble ( https://thimble.mozilla.org  ); Thimble was selected for four reasons it is an  online   editor,  simple to use, it is free and you see the preview immediately. In Thimble though try to keep the image or video file sizes small. You can pretty much treat it as HTML, after you have added the script file shown in bold. <!DOCTYPE html> <html>   <hea...
3 comments
Read more