Learn A-Frame And Get Ready For WebVR
Enroll in my course! More than 8 hours of content to learn how to create and test your WebXR scenes on any device!
Who This Course Is For
- Web designers
- Front-end web developers
- Game designers
- Game developers
- 3D artists
- Educators
- VR enthusiasts
- People who would like to learn about new trends and technologies
What You Will Be Learning
A-Frame Basics
- What is A-Frame
- Installation and testing
Adding And Modifying HTML Elements
- Basic primitives and HTML attributes
- Position and relative positioning
- Rotation and relative rotation
- Scale, relative scale, and reflection
- Image textures and materials
- Image and curved image primitives
- Breaking primitives down
Modifying The Virtual Environment
- Ground
- Sky and 360° image
- Camera primitive
- Loading and displaying 3D models
- Animating objects
- Adding lights and shadows
- The A-Frame Inspector
Interacting With The Objects
- Cursor primitive and component
- Event-set component
- Gaze-based interactions
- Selective intersections
- Controller-based interactions
- Interaction gestures
Enhancing The Virtual Environment
- Physics and collisions
- Sound and positional audio
- Video
- 360° Video
- Stereoscopic images
- Antialiasing
Enhancing The Interactions
- Semantic animation
- Animation component
- Text component
- Look-At component
Moving Around In Virtual Reality
- VR locomotion and its limitations
- Smooth artificial locomotion
- Movement controls component
- Navigation meshes
- Dynamic FOV reduction
- On-rails locomotion
- On-rails dynamic FOV reduction
- Instant and blink teleportation
- Free teleport locomotion
Controlling Entities Programmatically
- Why registering components
- The .init() handler
- Using the Schema
- The .update() handler
- The .tick() handler
- Blink teleportation component PART 1
- Blink teleportation component PART 2
- Entity spawner component
- Multiple entities component PART 1
- Multiple entities component PART 2
Testing Your WebVR Scenes On VR Headsets
- Using Glitch
- Installing and using a web server
- Installing and using ngrok
- NOTE Camera offset on mobile
Why to Enroll
This is the most complete and detailed A-Frame course you can find online, and its content is structured to introduce you to all the topics, from the most basic to the more advanced ones, in a logical progression.
In each lecture, I explain the concepts with practical examples, allowing you to see the theory in practice.
Most importantly, I created this course in September 2017, when A-Frame was on v0.7.x, and since then I have kept it updated adding new content and information. Therefore you will have the opportunity to learn what has changed with its next releases.
Last but not least, as you will find plenty of examples and chucks of code online (e.g. on Glitch, CodePen, Stack Overflow) this course will also allow you to understand why some projects and experiments created using older versions of A-Frame may not work correctly when using the latest release.
Add-Ons
For each lecture, you will be provided with:
- Downloadable source code of all the lessons that you can use as templates
- Web links to resources used in the lectures (textures and 3D models)
- Web links to FREE 3D models and 3D modelling software
- Web links to VR-related websites