VR for Enterprise Developers

Front-end technologies don’t just stop at browsers and mobile devices anymore. The rise of consumer grade, immersive, and extended reality hardware and software is the next frontier for our consumer and enterprise apps. But access to these tools and platforms is not strictly restricted to native APIs. Web standards continue to evolve and support XR display and input modes, and there are amazing JavaScript technologies such as WebGL, Three.js, React 360, and A-Frame that let us take our web development skills to extended reality.

The Aquent DEV6 “VR for Enterprise” the course will thoroughly cover React 360 and A-Frame in only two full days.

React 360 is built on top of React. It is optimal for creating interactive 2D and 3D user interfaces on a PC, mobile, or VR device.

Based on top of HTML, A-Frame is an ideal framework for building detailed 3D worlds and scenes. It is less geared towards user interaction than React 360.

Through a combination of hands-on application and lecture, you or your organization will gain a comprehensive understanding of these cutting edge technologies.

This course can either be offered at the location of your organization or the Aquent DEV6 Mississauga office.

Cost: $999 CAD / $999 USD
Duration: 2 days
Dates: Nov 11, 2019 — Nov 12, 2019 Dec 9, 2019 — Dec 10, 2019 Jan 20, 2020 — Jan 21, 2020 Feb 17, 2020 — Feb 18, 2020
Pre-requisites
  • Understanding of HTML, CSS, and React
  • Some understanding of JavaScript
  • No prior understanding of A-Frame, React 360, and WebVR is required

Hasan Ahmad

Our VR Instructors

This VR for Enterprise Developers training course was designed and developed by DEV6 web application developers who use VR on real-life projects. The DEV6 VR for Enterprise Developers course is highly interactive and features significant hands-on coding and a large number of student labs.

Course Modules

Part 1 — React 360

Module 1: Introduction

  • Introduction to WebGL and WebVR
  • Three.js
  • 3D Coordinate System
  • What is React 360?
  • React 360 Features

Module 2: Environment Setup

  • Essential tools and plugins
    • NPM/Yarn
    • React 360 CLI
  • Local Development with React 360

Module 3: Code Structure

  • Index.js – Application code
  • Client.js – Runtime code
  • Static Assets – Application media
  • Index.html – Application mounting point
  • Main Components
    • View
    • Image
    • Text
    • Entity
    • VrButton

Module 4: 360 Images and Videos

  • Supported image and video formats
  • How to display Panoramic Images
  • How to display videos
  • Clearing background images and videos

Module 5: 2D Interfaces and 3D Models

  • Surfaces
    • Types of Surfaces
    • Rendering to a Surface
    • Modifying a Surface
    • Using Multiple Surfaces
    • Detaching a Surface
  • 3D Objects
    • Where to get 3D Objects
    • Entity Component
    • Mounting 3D Models
    • Locations
  • User Interfaces
    • Using Layout

Module 6: Audio

  • Background Audio
  • Sound Effects
  • Audio Controls

Module 7: VR Interactions

  • Button inputs
  • VR Buttons
  • Raycasters

Module 8: Native Modules

  • What are Native Modules?

Part 2 — A-Frame

Module 1: Introduction

  • Introduction to WebGL and WebVR
  • Three.js
  • What is A-Frame?
  • A-Frame Features

Module 2: Environment Setup

  • Using Glitch
  • Local Development with A-Frame

Module 3: Primitives

  • What Are Primitives?
  • Attaching Components to Primitives
  • How to Register a Primitive

Module 4: Entity Component System

  • What is the Entity Component System?
  • Composition Over Inheritance
  • Breakdown of the ECS
  • A-Frame APIs Based on ECS
  • Benefits of ECS
  • How Does ECS Apply to A-Frame?
  • Declarative ECS
  • Basic Component Structure
  • Community Component Ecosystem

Module 5: Entities, Events and DOM APIs

  • What are Entities?
  • Retrieving an Entity
  • Entity Properties
  • Entity Methods

Module 6: Writing Components

  • How to Register a Component
  • Using a Component from HTML and JavaScript
  • Component Schema
  • Lifecycle Handler Methods

Module 7: System

  • How to Register a System
  • Properties and Methods
  • How to Access a System
  • Separation of Logic and Data

Module 8: Developing with Three.js

  • Relationship between A-Frame and three.js Scene Graphs
  • Accessing the three.js API
  • Working with three.js Objects

Module 9: 3D Models

  • Asset Management System
  • Loading 3D Models
  • Animating 3D Models

Module 10: VR Interactions and Controllers

  • Gaze-based Interactions
  • VR Controllers
  • Raycasters

View Our Other Courses

Angular 7 Logo Nov 18/2019

Angular 8

React Training Course Logo Oct 23/2019

ReactJS

React Training Course Logo Oct 31/2019

React Native

Electron Training Course Nov 15/2019

Electron

Nov 29/2019

Node.js

Vue.js Training Course Oct 29/2019

Vue.js

Sign-up for our React course

Build a complete ReactJS application as the course is being taught.

View Course Details