Let’s Create Your First WebAR Project With JavaScript

Published in

Parenting 數位研發

5 min readJun 6, 2022

My Beauty

Augmented Reality has always been my favorite topic. With the prominent improvement on both hardware and software recently, I have witnessed so many marvelous creations. Now I dare to challenge myself to build my own AR project.

WebAR, I Choose You

I would like to start this project with a simple web application. The inspiration comes from the WebXR Device APIs mentioned in MDN Web Docs. However, these APIs are so new that the compatibility is a big issue.

Luckily, browsers and 3D model libraries now are really handful and performant so that we can guarantee a decent result without using new WebXR APIs.

Sharpen Our Tools

Here are my working tools:

iPhone 12 Pro with the latest iOS version.
Have the latest version of Safari and Chrome App installed on my iPhone.
THREE.js r139, which is the latest version of THREE.js to date as this article is written.
A Node.js server with HTTPS.

The fourth point is indispensable and I will explain that later. If you don’t have a SSL server, you can still setup a self-signed one on local. I will provide a tutorial link in the reference section.

Project Setup

For any web application, we are going to need a server and a default HTML template. So, let’s create a server.js and an index.html respectively.

Add your key and cert to enable SSL

We also add button, center-object section and CDN link for ThreeJS

Also we create a simple style.css in css folder.

Now in your terminal type npm start and open your browser on your phone with https://{YOUR IP ADDRESS}:3000, remember we have enable SSL so we should use https.

Sketchfab — Find Yourself A Model

Big thanks to Nyilonelycompany who provides awesome models on Sketchfab. I chose a Bengal cat model for my project and save downloaded files in models/source folder.

On Sketchfab, you can find lots of quality 3D models for free. However, please remember to credit the authors and keep in mind that none of these is for commercial use.

Setup A Scene

There are four major variables to initialize a 3D world: scene, camera, light and renderer. So let’s create a script in index.html.

The axesHelper is optional. If your are new to ThreeJS and its world, it is really handy for you to better understand how models are presented.

Initialize things we need to create a virtual world

Now we call the init function when window is loaded. Put the following inside the <script>. Here I define two more global variables: mixer and target.

A fundamental setup for a 3D scene

First Demo

Type npm start and open https://{YOUR IP}:{YOUR PORT} in mobile browser. If everything is good, click Start AR button on top left. You will see our cat model pop up! My resize my snapshot but you can see yours on your phone.

Access Camera

One vital feature of any AR project is the combination between the virtual and real world. Therefore, we will have to access camera and enable it.

I chose to use webcam-easy to enable camera. Let’s include its CDN link and add other variables. The updated code will look like this:

Put startWebcam and stopWebcam functions inside <script> tag

Let’s run our server again and enable camera.

Actual Fun Part

Hooray! We can see our model moving in the AR view. But there is one more thing left behind — the model is pinned at a fixed position, but in reality, models should move/rotate/scale according to my position.

In order to do that, we will need to retrieve data from hardware. Modern smartphones have many sophisticated hardware to collect physical data. For this project, I am going to need data from gyroscope.

The following coding requires basic matrix calculation and understanding about how gyroscope works. Let’s jump into the code.

Get Access To Gyroscope

The first thing is to ask for permission to use gyroscope. We need to use DeviceMotionEvent API and it is available only if we enable SSL. That’s why I mentioned a SSL server is necessary.

If you are not familiar with device orientation, it is highly recommended to use Chrome DevTools to play around it. Here is the link.

Just remember, I am developing in portrait mode and the default angle is 0, 90, 0 for alpha, beta and gamma respectively. For more details please visit this link.

Angles Manipulation With Rotation Matrix

Keep an eye on both handleOrientation and createRotationMatrix.

Since gyroscope returns Euler angle, which is the change of angles instead of how much we actually rotate along with certain axis. So, I convert them to a rotation matrix first and with the help with trigonometric functions we can obtain accumulating values. These values are exactly how much we rotate.

I have written another article talking about this mechanism. It is hightly recommended to take a look.

Rotate My Model With Angles

Let’s focus on totalRightAngularMovement and totalTopAngularMovement. They are how much my camera rotates along with y and x axis and are derived from beta and gamma values respectively.

In addition, I clamp these angular values in order to obtain a more stable result. Let see what happens in animate function.

Now we know totalRightAngularMovement is how many degrees we rotate. I clamp the value by defining a range.

The Final Result

Future work

The preliminary result can successfully demonstrate my thoughts. However, there are a lot left to be desired.

Translating/scaling my model when moving camera — for a better AR project, it is important to show how we interact with the virtual model.
Handle abrupt displacement of models — I think it’s because sensors data bring noises and causes undesired model movement.
Use a more stable data sources — Sensors data are not reliable and well-rounded if designing a more delicate AR project. I think I can use other data source like GPS to optimize my implementation.

Final Words

You can view my source code here. If you like my work, please leave a star on my repo and an applause on this article.

Thank you! Happy coding!