Monday, 9 December, 2019 UTC
![[XR Tutorial] How to build a WebXR with Angular Js, AR Js and A-frame Js](https://cache.vrarnews.com/pvw0VKs_rJtwF__W1CtPgpMoYUsT*100s_21s_acb-zan0vcpjjq-qgwzs_.:bxazm_img.jpg)
Summary
[XR Tutorial] How to build a WebXR with Angular Js, AR Js and A-frame Js
Hello guys!
So now here we will try to build a WebXR with Angular Js, AR Js and A-frame Js! with these 3 we will try to implement the XR Tech which is to bring Virtual Reality and Augmented Reality to the Web!
So now here we will try to build a WebXR with Angular Js, AR Js and A-frame Js! with these 3 we will try to implement the XR Tech which is to bring Virtual Reality and Augmented Reality to the Web!
If you wanna know about WebXR Device API you can visit this link :
https://immersive-web.github.io/webxr-samples/proposals/phone-ar-hit-test.html
Or use this simple example!
https://aframe.io/blog/arjs/
Create Angular Js Project
Trending AR VR Articles:
1. Infographic: The Future of Virtual Reality
2. Mario Kart in a real vehicle with VR!
3. How XR Can Unleash Cognition
4. Oculus Go, the Nintendo Switch of VR
To create an Angulat project, you can simply open your terminal shell and type “ng new <project_name>” and wait until it finishes loading, then you can try to run it with “ng serve ” and usually it will have a link “http://localhost:4200", i usually use this “ng serve — ssl — host <your_ip>” the reason i use this is because :
- — ssl : this parameter is used for providing the ssl certificate in a local level, so our project will run with the https feature, because our web will require camera access permission,and it will ask us only if we have a https connection (trusted connection)
- — host : this parameter is used for activating our public ip with the project, the reason i used this because i wanna share my local angular project with the phone.
Import AR Js and Aframe Js
Now just simply import the required Js file in the head tag of the html file, you can also use the aframe-ar.js library also instead of aframe.js and AR.js
Create a WebXR Scene
Now it is time for creating our WebXR World!
use <a-scene> to create a scene where we can manipulate the XR, then inside the tag let’s put <a-box> and <a-marker-camera> to create a box when the camera scan the marker.
use <a-scene> to create a scene where we can manipulate the XR, then inside the tag let’s put <a-box> and <a-marker-camera> to create a box when the camera scan the marker.
For a further advanced project for WebXR, we will try use our own marker with our own 3D Model, so stay tuned!
Run the project!
Now just simply back to the browser and check for the changes!
and Voila ! you made it !
and Voila ! you made it !
Experimental Issues
There were some concern when i’m trying to implement this on chrome which has this issue
The scene is keeps reloading the trigger the ‘requestAnimationFrame’ for many times, this is just happen on Mobile!
When i tracked that, i have found that the cause was the file above, which is zone-evergreen.js, this file will be automatically executed when angular project is running.
Based on the discussion this was pretty an issue and up till now there were no any resolve for this
So in that case i tried to find the root cause by searching it
then i have found that the mode was the cause, the mode where it will be a phone mode which are Android and Ios and any other Mobile
So i tried to comment this which will make it run as a dekstop, not mobile
And Voila again ! the WebXR on Angular has run also on Mobile !
If you use the VR Mode you can use it on Google Cardboard instead!
If you use the VR Mode you can use it on Google Cardboard instead!
That’s it!
Dont forget to folllow me and give some claps!
If you have any question just reach me out in the comment below!
If you have any question just reach me out in the comment below!
Don’t forget to give us your 👏 !
https://medium.com/media/1e1f2ee7654748bb938735cbca6f0fd3/href[XR Tutorial] How to build a WebXR with Angular Js, AR Js and A-frame Js was originally published in AR/VR Journey: Augmented & Virtual Reality Magazine on Medium, where people are continuing the conversation by highlighting and responding to this story.