Augument Reality With A Frame and AR Javascript Libraries

Posted By : Pawanpreet Singh | 28-Sep-2018
javascript

AFrame.js -  Using AFrame.js library one can build virtual reality applications in a markup language like html.

First we have created a scene using Aframe.js using following snippet

 

<html>
<script src="aframe.min.js"></script>
<a-scene>
    <a-plane color="#c2b280" height="10" width="10" rotation="-90 0 0"></a-plane>
    <a-torus color="green" radius="1.2" position="-4.5 3 -4.5"></a-torus>
    <a-cylinder color="brown" height="2" radius="0.05" position="-4.5 1 -4.5"></a-cylinder>
    <a-torus color="green" radius="1.2" position="4.5 3 -4.5"></a-torus>
    <a-cylinder color="brown" height="2" radius="0.05" position="4.5 1 -4.5"></a-cylinder>
    <a-text color="red" value="Pawanpreet Singh" width="5" position="-0.5 0 -4" rotation="-90 0 0"></a-text>
    <a-text color="blue" value="Oodles Technologies" width="5" position="-0.5 0 -3" rotation="-90 0 0"></a-text>
</a-scene>
</html>

 

Everything in the Aframe is written in the scene element.

  • First I have created a plane and provided it a color #c2b280 for using it as floor.
  • Then I created circles using torus element and provided green color to it and assign its position in the scene.
  • Then to using circles as tree a have created its lower portion using cylinder element and provide brown color to it and then set its position.
  • For Writing text i have used text element and provided color and values to it.

 

AR.js - Using AR.js one can build Augment Reality applications in Javascript.
 
To use the above code written in Aframe library in Augment Reality I have used AR.js framework as shown below:

 

<html>
<script src="aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
<a-scene >
    <a-marker preset="hiro">
        <a-plane color="#c2b280" height="5" width="5" rotation="-90 0 0"></a-plane>
        <a-torus color="green" radius="0.4" position="-1.5 0 -1" rotation="-90 0 0"></a-torus>
        <a-cylinder color="brown" height="2" radius="0.03" position="-1.5 0 0" rotation="-90 0 0"></a-cylinder>
        <a-torus color="green" radius="0.4" position="1.5 0 -1" rotation="-90 0 0"></a-torus>
        <a-cylinder color="brown" height="2" radius="0.03" position="1.5 0 0" rotation="-90 0 0"></a-cylinder>
        <a-text color="red" value="Pawanpreet Singh" width="5" position="-1.3 0 -2" rotation="-90 0 0"></a-text>
        <a-text color="blue" value="Oodles Technologies" width="5" position="-1.2 0 0" rotation="-90 0 0"></a-text>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</html>


In the above code we used aFrame-ar.js to use our aframe written code in Augment Reality applications.

First we told the application on which marker you have to react and set it to Hiro marker.

Hiro marker is as shown below


Then I changed height and positions of the object so that it can be shown in the marker.

Now when I run this application and shown the above marker to camera it augmented the marker as shown in the image below

 

 

Hope It helps you understand the basics of AR.js and Aframe.

Related Tags
cloud computing
saas
PWA
Web Apps
Java
Angular
nodejs
php
vue.js
Spring boot
mysql
ReactJS
Django
angularjs
Angular2
bootstrap
jquery
grails
LMS
Java Virtual Machine
html
Mean stack
Moodle
html5
oops
Shopify
reverseajax
Knockoutjs
ngrok
Meteor
plugin

About Author

Author Image
Pawanpreet Singh

Pawanpreet is an seasoned Project Manager with a wealth of knowledge in software development, specializing in frontend and mobile applications. He possesses a strong command of project management tools, including Jira, Trello, and others. With a proven track record, he has successfully overseen the delivery of multiple software development projects, managing budgets and large teams. Notable projects he has contributed to include TimeForge, Yogyata, Kairos, Veto, Inspirien App, and more. Pawanpreet excels in developing and maintaining project plans, schedules, and budgets, ensuring timely delivery while staying within allocated resources. He collaborates closely with clients to define project scope and requirements, establish timelines and milestones, and effectively manage expectations. Regular project status meetings are conducted by him, providing clients and stakeholders with consistent updates on project progress, risks, and issues. Additionally, he coaches and mentors project leads, offering guidance on project management best practices and supporting their professional development.

Request for Proposal

Name is required

Comment is required

Sending message..