3D on the Web & WebXR

2 hours, 23 minutes CC
3D on the Web & WebXR

Course Description

Learn to create immersive 3D experiences for the web! In this course, you’ll see the possibilities of 3D on the web and with the new WebXR device APIs. We will use three different libraries to create 3D experiences: Three.js, Bablyon.js, and AFrame. And finally, you will add augmented reality and virtual reality support into your 3D scenes.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: March 9, 2021

Topics

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 11 minutes

3D Libraries

Section Duration: 44 minutes

Building 3D Scenes

Section Duration: 35 minutes

Virtual & Augmented Reality (VR & AR)

Section Duration: 44 minutes
  • AR Hololens Demo
    Ayşegül demonstrates the Hololens device. Multiple cameras around the Hololens headset track hand the user's hand movements. A menu to access the applications appears on the user's wrist.
  • Creating a VR Scene
    Ayşegül creates a VRButton component to launch the VR experience. The Chrome WebXR extension can be used to simulate the VR experience in the browser or inspect and debug the experience on a connected mobile device.
  • Creating an AR Scene
    Ayşegül converts the VR scene to an AR scene by using the ARButton component and updating the renderer. AR experiences use the setAnimationLoop method on the renderer object since they require higher frame rates than the requestAnimationFrame function can provide.
  • Using AR Hit Test
    Ayşegül adds hit test functionality to the AR scene. When a reference space is detected by the camera, a mesh is added to the scene as a target for a model to be placed. The model remains stationary at that position throughout the AR session.
  • Loading Models to AR
    Ayşegül demonstrates how to load an immersive 3D model into the AR scene. Users are able to explore the model by walking around and moving the camera.
  • Loading Models Practice
    Students are instructed to try the other models and loaders located in the three.js/examples/models directory. Sample code for loading these models can be found on the threejs.org website.
  • Accessibility
    Ayşegül describes different ways VR and AR experiences can be made more accessible. One technique is to allow multiple forms of input like hand gestures, eye tracking, or vocal cues. The upcoming layers feature of the WebXR API will sync HTML element on the canvas to make the experience more visually accessible.

Wrapping Up

Section Duration: 7 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now