Creating an Augmented Reality Web Page. Blender and Three.js

Step by step Augmented Reality Web Page. Blender and Three.js

Hello and welcome.

What you’ll learn

  • Create a 3D Model with Blender.
  • Create Custom QR Codes with javascript.
  • Create an Augmented Reality Web page to use with your mobile device with Three js.
  • Scanning QR Codes with javascript.
  • Load a 3D Model in a Augmented Reality Environment.
  • Create an electron app.

Course Content

  • Introduction –> 1 lecture • 1min.
  • Blender –> 11 lectures • 39min.
  • QR Code App –> 14 lectures • 43min.
  • Creating the Web Page –> 14 lectures • 33min.
  • Real scenario –> 2 lectures • 4min.
  • Conclusion –> 1 lecture • 1min.

Creating an Augmented Reality Web Page. Blender and Three.js


  • Basic understanding of Blender.
  • Basic understanding of Javascript.
  • Basic understanding of Visual Studio Code.

Hello and welcome.

If you are a web developer or designer interested in creating a web page that has the ability to use your device to use it in an augmented reality environment, this course is for you.

This course is focused on using Blender, Javascript and Three.js to create an augmented reality application.

We will create step by step the 3D model that we will deploy, the QR codes that we will read with our device to load the environment and finally we will create our web application.

In this course you will learn:

  • Create 3D models in Blender.
  • Create a scenario in Blender that will be used in an Augmented Reality environment.
  • Export the 3D scenario.
  • Create an application in electron to generate QR codes and save them as images.
  • Read QR codes using javascript.
  • Load 3D models on a web page.
  • Create an augmented reality application using a Three.js.
  • Use the a-frame library as support.
  • Use Visual Studio Code to create the projects.

You may find this course attractive because it can serve as the basis for creating a prototype augmented reality app that you can later customize.

In addition, you will have access to the content created during the course, such as the 3D model and the code.

I hope you find the content useful and that you can apply it to your personal projects.

Have fun and happy learning

Get Tutorial