Course Outline

Have fun learning how to design, program, and create your very own web VR experiences using A-Frame. Gain experience with this interactive course where you will be creating alongside us. Throughout this course, we will be learning a large number of different and universal skills. These skills will be applicable to all technical jobs and careers based around programming.

VRVoom, now known as ByteEd has several years’ worth of teaching experience and course creation. ByteEd has a specialist education team ready to empower future generations with the knowledge and tools to unleash creativity. We are passionate educators, programmers, and 3D modelers who strive to enable young people in the learning of how ao mariko content is made in Aotearoa and across the world.

ByteEd offers scaffolded learning programmes for all young learners and beginners based on a design thinking approach. We utilise our know-how to provide interactive and engaging learning opportunities through a “hands on” practical approach.

We assist learners to excel at school, aligning with the revised New Zealand Technology curriculum, with a particular focus on computational thinking (CT) and designing and developing digital outcomes (DDDO) technological areas, building skills and supporting students to move beyond being users of digital technologies to becoming innovative creators of digital solutions and outcomes.

To begin our learning adventure, we will start by creating a simple website to understand HTML programming and its structure. HTML is the building block of all websites you interact with. We will then add some interactivity with buttons by learning JavaScript, a text-based programming language.

Then, using our new skills, we will create a web VR experience using A-Frame. A-Frame allows us to create interactive 3D worlds all held within a web browser. Create and share your own VR experiences easily with a simple web link.

We recommend you follow through with every exercise, to ensure you have the best, most complete understanding of the topic and its contents. However, though not recommended, you may skip week 1 if you are already confident in creating and using HTML. You may also skip week 2 if you are already confident in computational thinking and JavaScript.

Course breakdown

• Week 1 – Introduction into HTML and programming
  – Course Overview
  – What is HTML? A dive into websites
  – Making our own website. How does coding work?
  – Editing tags. Adding colours and fonts to the page
  – Embedding, Links, and images. Practice makes perfect.
• Week 2 – Introduction to Javascript, adding buttons and outputs to your website
  – What is Javascript, and why are we using it?
  – The basics of text-based programming. Variables and data
  – Creating buttons and updating displays
  – Practice with Javascript
• Week 3 – Introduction into A-Frame, creating a 3D world with basic shapes
  – What is A-Frame? Examples and what it does
  – Adding A-Frame to your website, your first box.
  – Learning about properties: position, rotation, and scale
  – Create a simple world out of 3D objects.
• Week 4 – Adding interactivity to your experience, music / sound effects, ECS (Entity Component System)
  – What is an ECS and where is it used in the Industry?
  – Adding basic interactivity to objects
  – How to add assets to your webpage
  – Using Javascript to add sound effects
  – What else can we add?
• Week 5 – Adding 3D models into your experience, finishing touches.
  – Learning how to add 3D models to your experience
  – Adding animated 3D models, how to change it’s animations
  – VR hands! And basic click input
  – Planning, creating, and finishing your experience!

Once you’re ready to get started, head over to the next lesson!