CAS Community   >   Resources   >  

Screen_shot_2018-02-20_at_18.14.35
Virtual Reality using HTML and javascript

HTML based Virtual Reality

Scott Turner

Created by Scott Turner
last edited Feb 20 2018 by Scott Turner


A collection of bite-size videos taking the user through free VR using Thimble and A-Frame to make relative simple and quick Web VR.

Thimble is a free online web-development tool from Mozilla where you see the results previewed.

Video 1 Setting up a basic script for Aframe to add text, box and a red screen. Using Mozilla’s Thimble tool and https://aframe.io/

Video 2 Rotating the box.

Video 3 In this video camera position is adjusted and was to map an image to the box is look at - surprisingly not that hard in A-Frame.

Video 4 We have had images we can also add video to a shape or as a separate object.

Video 5 Adding a 360 degree video to the scene in place of the sky.

Video 6 This brings together a few of the ideas from videos 1-5 and adds assets and 3D models to the scene

Some example code is available at this Github site or attached zipped file.

The main document source for this is A-Frame Documents

Level:Intermediate

Teaches: (set of concepts learned) simple VR Relationships between entities

Downloaded 102 times.

Download

This resource has attached files: to access these files, please tick the box below to assent to the license terms
License: The resources on CAS website are under Creative Commons Attribution-Share Alike 3.0 licence unless otherwise specified by the resource creators.

You must confirm that you have read and agree the licence's ToS before you can download the attachments of this resource.

I have read the licence agreement of this resource and agree to abide by its terms and conditions.

Feedback and Comments


Available when logged in (join via the front page, for free):
  • View 1 comments on this resource.
  • View resource history, links to related resources.
  • Leave feedback for the author(s), or help by editing the resource.
Categories: