Webvr With A Frame Coding For Virtual Reality Websites

Tags: Virtual Reality

How to build Virtual Reality Websites with A-frame easily

Last updated 2022-01-10 | 3.3

- Create scenes in A-Frame
- Use A-frame with HTML
- PHP and Javascript

What you'll learn

Create scenes in A-Frame

Use A-frame with HTML

PHP and Javascript

* Requirements

* Knowledge in Basic HTML would be a definite advantage but not essential
* Knowledge in PHP & Javascript would be an advantage but not essential

Description

Introduction

According to Techcrunch recent article in June 2016, Virtual Reality (VR) is the next big thing. Facebook also made the bold move to acquire Occulus Rift, which is a company that designs VR headsets, for a staggering $2 billion. All data indicate that VR is the next big wave of change in the Media landscape. We've witnessed an exponential growth in availability of apps in the decade following commercial production of tablets and smart mobile phones. We can foresee that in the next decade, innovation in VR will also grow exponentially and websites will have a VR version that will allow users to view from their mobile devices+headset. As the hardware is currently getting more popular and sales are on the rise, there will be a demand for VR online applications.

Content

The course was designed to teach the students about the latest technology for developing VR websites and the easiest way to make a start in designing such websites. The easiest technology that a developer or a newbie to use to make VR websites is the A-frame, developed by Mozilla. Although this technology is at an early stage, it is slowly gaining popularity. But it would require more developers to use it and build websites with the technology in order to further develop a systematic design methodology.

The first section is about using A-Frame and building on various tags to give the student to knowledge and skills to understand and use varioius objects on a VR scene. In the next sections , you will learn simple animations and use of cursors.

This will be followed by lectures on how to use Javascript and PHP with A-frame.

The course ends with simple projects such a Multicolored bubbles, Interactive Hotel rooms view and VR shopping page.

Who this course is for:

Job-seekers who are looking for job as Web Designers and who would like to add new skills to their CV
Web Designers who would like to code commercial VR websites
Those who have interests in Virtual Reality products
Web Designers who would like to add cool sites to their portfolio

Course content

8 sections • 39 lectures

Introduction 1 lectures

Introduction to the Course Preview 03:13

Summary of the contents of this course

Working with Objects 21 lectures

Hello World in A-Frame Preview 04:03

This is your first Hello World page designed with A-frame. It is adding a simple Box primitive to the page using one line of code and sourcing the correct library.

Change the Color and Use Image as material Preview 03:46

Following up on the Helloworld page, we will modify the color attribute using the names of the colors and also using their Hex codes. We will also make use of images as material for the objects.

Basic Syntax

To revis about Basic A-frame Syntaxes

Background Preview 03:25

A background image can be set using the <a-sky> tag. This lesson how to add a background and also shows the difference between adding a normal picture and an equirectangular image.

Background

Opacity Preview 02:14

An entity has an opacity of 1 by default i.e it is fully opaque but transparency can be added through the use of opacity attribute. Opacity takes a value of 0 to 1 and 0 being completely transparent.

Sphere & Ring Preview 02:34

A sphere is a useful basic shape which can take colors and images as materials for rendering.

Tetrahedron, Octahedron, Torus Preview 02:06

This lesson continues with add the geometric shapes Tetrahedron, Octahedron and Torus.

Object Primitives

Test about Object Primitives

Position attribute Preview 04:10

A position attribute is available for all entities by default and this allows the developer to place entities anywhere in the three dimensional space.

Rotation attribute Preview 03:55

The rotation attribute is very useful to create animation and it is available to all entities by default. Rotation attribute allows any entity to be rotated in the three dimensions using vec3 string. A rotation of "45 90 0" means a rotation of 45° in the x-axis, 90° in the y-axis and 0° in the z-axis.

Scale attribute Preview 03:48

Scale is also inherently available in all entities. It allows entities to be scaled in the three dimensions. The scale take property value in vec3 format where "1 1 1" means exact scale and "2 1 1" would mean stretched in the x- dimension by twice.

Position, Scale and Rotation

Questions related to Position, Scale and Rotation

Assets Management System Preview 03:31

Assets Management System is used in 3D animation to ensure that resources are already loaded when rendering of the object is being done. A-frame also has its Assets Management System and it allows pre-loading of Video, Images, Sounds and other Object Models using simple tags. These resources can then be used by referring to their ID's.

Using a Video as Material Preview 03:25

The Material is a component of an entity or primitive and a Video can also be used as the material. This gives very cool effects like e.g a sphere or cube playing a video.

Curved Surfaces Preview 02:31

In the Virtual Reality world, curved surfaces are useful to display information because they allow the user to view the whole surface at the same distance if correctly positioned. An image on a large flat surface may appear distorted on the far edges.

A Plane and how to display a Video or Image on it Preview 02:36

A handy feature is to easily display images and videos on plane surfaces. This is easily done in one-liners in A-frame. These surfaces can be rotated and positioned in any way required.

Set a Video as Background Preview 02:28

As WebVR developers, you will work with 360 Video with the increasing popularity of 360 Video Recorders. With A-frame it very easy to add objects in the scene while a 360 Video is playing in the background. This lesson teaches you how to set a 360 Video as Background.

An Entity with Geometry and Material Preview 03:38

This lesson will teach you how to add certain components to 'blank' entities and set the values of properties associated with the components.

Mixins Preview 06:18

Normally primitives and entities use a combination of component properties and a lot of times, component properties are common between entities. A-frame Mixins can be used to define component properties for the purpose of reusing them using their id's.

Working with Waterfront Models Preview 04:41

OBJ (or .OBJ) is a geometry definition file format first developed by Wavefront Technologies. This lesson teaches how to download Wavefront models and place them in the A-frame scene.

WebVR - Using Waterfront models design Virtual Reality websites as it gives the developer easy access to 3D models and A-frame gives the flexibility to use them as normal entities. With simple attributes, the models on the scene can be scaled, moved and rotated.

Animation and Cursors 4 lectures

Basic Animation Preview 05:04

Basic animation can be run using <a-animation> tag. For basic animation, no script is required. It requires to set which attribute to animation e.g if position attribute is used to animate, the entity to which the animation is applied will move across the scene. If the rotation attribute is used, the entity will rotate.

Animation with Component Properties Preview 02:54

Cursors Preview 08:01

Cursors with Visual Feedback Preview 04:30

A-frame with Javascript 5 lectures

Using Javascript to generate A-frame entities Preview 04:00

Javascript can be used to dynamically generate the tags for entities and set attributes for those entities, and even update them, all from the browser.

Generate entities in a loop using Javascript Preview 03:09

Add animations as child to the boxes using JS Preview 03:45

Using Javascript to interact with entities Preview 03:56

Javascript can be used between the <script> tage to update attributes on the aframe page similar to normal HTML. For example, Javascript can be used to add an event listener for 'click' to an entity and it can be scripted to do something when the click event occurs.

Register a component Preview 05:37

A-frame with PHP 1 lectures

Generate objects with PHP loop Preview 07:45

PHP is used as Server Side scripting. It is the language that is used to create dynamic pages at the Server. This lesson shows how to use PHP to dynamically create any A-frame entities. The simple example used here is to generate a series of similar entities but spaced out in the 3D scene.