@ar-js-org/ar.js
Advanced tools
You can now own the first commit of AR.js! 👉OpenSea
AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location-based AR and Marker tracking.
30/12/21 Update: There is now also a brand new OSS Web AR JS library around, called MindAR.
If you need a great Image tracking feature (also multiple image tracking) and Face tracking, go check it out!
As for now, AR.js is still the only library providing Marker based and Location based AR features.
This project has been created by @jeromeetienne, previously managed by Nicolò Carpignoli and it is now maintained by the AR.js org.
🚀For frequent updates on AR.js you can follow @the official Twitter account and Watch this repo!
Logo is courtesy of Simon Poulter .
If you want to give a first look at AR.js potential, you can continue with this Readme.
⚡️ AR.js is coming in different builds. They are both maintained. They are exclusive.
Please import the one you need for your project, not both:
AR.js with Image Tracking + Location Based AR (AFRAME):
AR.js with Marker Tracking + Location Based AR (AFRAME):
AR.js with Image Tracking + Marker Tracking (Threejs):
if you need the ARjs namespace import ar.js:
AR.js with Location Based AR (Threejs):
You can also import a specific version replacing master keyword with version tag:
<script src="https://raw.githack.com/AR-js-org/AR.js/3.4.3/aframe/build/aframe-ar-nft.js">
Please follow these simple steps:
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-nft
type="nft"
url="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
scale="5 5 5"
position="150 300 -100"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
Please follow these simple steps:
add-your-latitude and add-your-longitude with your latitude and longitude, without the <>.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>GeoAR.js demo</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>
<body>
<a-scene
vr-mode-ui="enabled: false"
arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false;"
>
<a-text
value="This content will always face you."
look-at="[gps-camera]"
scale="120 120 120"
gps-entity-place="latitude: <add-your-latitude>; longitude: <add-your-longitude>;"
></a-text>
<a-camera gps-camera rotation-reader> </a-camera>
</a-scene>
</body>
</html>
Please follow this simple steps:
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker preset="hiro">
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-entity
position="0 0 0"
scale="0.05 0.05 0.05"
gltf-model="your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Important! Be aware that if you are referring to external resources, in any app, especially those using NFT, you will encounter CORS problems if those resources are not in the same server of the code. If you can’t see the tracking, please open your Browser Dev Tools and check if you have CORS errors in the console. If so, you have to fix those errors in order to see your content. The correct fix is to place your resources on the same server of your code.
If you cannot do that, you can host a proxy anywhere server to solve that (https://github.com/Rob--W/cors-anywhere). Please note that several hosting services have policies that does not permit to use such server. Always check hosting services policies before using them to avoid account suspensions
Learn more on the AR.js Official Documentation.
You can install AR.js with npm and use in any compatible project that support npm modules (React.js, Vue.js, Next.js or whatelse), to install it run:
// Install with npm
npm install @ar-js-org/ar.js
// Install with yarn
yarn add @ar-js-org/ar.js
For some examples read this issue.
You can find a lot of help on the old AR.js repositories issues. Please search on open/closed issues, you may find interesting stuff.
From opening a bug report to creating a pull request: every contribution is appreciated and welcome. If you're planning to implement a new feature or change the api please create an issue first. This way we can ensure that your precious work is not in vain.
If you are having configuration or setup problems, please post a question to StackOverflow. You can also address the question to us in our Gitter chatroom
If you have discovered a bug or have a feature suggestion, feel free to create an issue on Github.
After getting some feedback, push to your fork and submit a pull request. We may suggest some changes or improvements or alternatives, but for small changes your pull request should be accepted quickly.
Some things that will increase the chance that your pull request is accepted:
It is all open-source! artoolkit5-js is under LGPLv3 license and additional permission. And all my code in the AR.js repository is under MIT license. :)
For legal details, be sure to check artoolkit5-js license and AR.js license.
Full Changelog: AR.js changelog
3.4.3
new-location-based A-Frame components #483THREEx import in gps-new-camera, to allow use of ES6 modules #484latLonToWorld() method to gps-new-camera, for compatibility with gps-projected-camera #485gpsTimeInterval property in gps-new-camera (this sets the geolocation maximumAge property)distance property to gps-new-entity-place, representing the distance in metres from the GPS position to the entity. This is dynamically updated as the GPS position changes.new-location-based examples.FAQs
Efficient Augmented Reality for the Web
The npm package @ar-js-org/ar.js receives a total of 326 weekly downloads. As such, @ar-js-org/ar.js popularity was classified as not popular.
We found that @ar-js-org/ar.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.