Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Hello, has anyone here able to play a model animation using the animation mixer when marker is found?
    @qu1ckdry thanks!
    I figured it out using <a-entity gltf> doesnt work with animation mixer for some reason. Some update must have changed it...
    what works is using <a-gltfmodel > instead...
    Hello wondering if anyone can help me with location based? There's an issue in the old repository that never got a solution, and it looks like I'm not the only person who's been struggling to get it to work: AR-js-org/AR.js#209
    as the 2nd commenter says on there - the augmented objects are fixed to the camera and not to a gps location. I'm using the exact example code from the docs
    Any advice appreciated !
    Dzmitry Haiduk
    Hi everyone! Is it possible to capture a video of an ar.js scene?
    @dhaiduk I think there is a solution in the AR.js github in the issues section where someone solved it...
    Hi everyone custom image not working in nft marker can u please try to help out this issue.

    @nickw1_gitlab https://hikar.org/webapp does not work on my iPhone SE (14.4.1), I can see all the labels which seem to be placed in correct direction, but the camera freezes. The same happen with red-box example in GitHub issue AR-js-org/AR.js#216. The iOS Safari console output the error:
    Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. (aframe-ar-nft.js:210535)

    When I replace "videoTexture: true;" with embedded, the camera works but not 'click' and if both "videoTexture: true;" and embedded, then the screen is totally black.

    Any idea what could be the problem? Thx in advance🙏🏽

    Anyone have a working example to click image or models that are shown over a marker. Apparently all the ones I found dont even work anymore and I don't understand why this is not a main usage to be able to interact...
    @max-koa - a belated thank you for the SVG link
    Following up on the comment from Edie @echodeltamoon_twitter - [Location AR not anchoring] I had no trouble getting the Location Based Example working(https://github.com/AR-js-org/AR.js#location-based-example). I was able to change text, text scale, add it to my geolocation HOWEVER, the text locks to the camera and does not anchor to the geolocation. Does anyone have a solution to this or good link they recommend for some custom anchoring attempts to keep the object at the location?
    Joseph Seger
    Hello everyone I was wondering if someone could please help me out with keeping my object still when using the NFT marker/Image Marker with A-frame. I have messed with the smooth Attributes but I still can not seem to keep the object from being extremely jittery. It would be helpful if someone could point me in the right direction.
    Jiří Lýsek

    Hi everyone, I will just post this here if someone has similar issue or want to make a pull-request. I needed to display far objects (>1km) like in the Hikar example. I was fighting with videoTexture: true because the image from camera gets squished and does not maintain aspect ratio. I wanted to maintain aspect ratio and make the image from camera cover whole area. I came up with this solution:

    //main <a-scene> element - you need to wait for loading - use `loaded` event
    var scene = document.getElementById('scene');
    //this is the extra component created by AR.js which puts camera feed into scene without making far objects invisible
    var webcam = document.querySelector("[arjs-webcam-texture]");
    var component = webcam.components['arjs-webcam-texture'];
    //you also need to wait for video to start playing via `loadeddata` event or similar, otherwise the `videoWidth` and `videoHeight` is zero
    var viewportRatio = scene.clientWidth / scene.clientHeight;
    var videoRatio = component.video.videoWidth / component.video.videoHeight;
    var w = Math.max(1, videoRatio / viewportRatio);
    var h = Math.max(1, viewportRatio / videoRatio);
    component.geom.attributes.position.array = new Float32Array([
            -w / 2, h / 2, 0,
            w / 2, h / 2, 0,
            -w / 2, -h / 2, 0,
            w / 2, -h / 2, 0
    component.geom.attributes.position.needsUpdate = true;
    //you should also call this code once the viewport size changes (onresize event of window)

    I am not sure how this code affects placing precision of 3D content in the image (you should probably adjust FOV, but I am not that far yet - outdoor testing required).

    And one small note: you should calculate with magnetic declination when displaying location based augmented content because the device's compass gives you angle to magnetic north which is not true north. You can simply calculate declination with some library (like magvar) and rotate the whole scene a bit like this:

    <a-scene id="scene">
      <!-- mag. declination 5 degs. -->
      <a-entity rotation="0 5 0" id="parent">

    You obviously need to set the rotation attribute dynamically as the declination differs in various locations. Than put all your location based content into the #parent element.

    Thank you @lysek for sharing your solution. I had the same problem, a workaround is to scale up the object when it becomes distant (see AR-js-org/AR.js#204). But it has some limitations, I will definetly try your solution.
    Nick Whitelegg
    @machinegunjoeviterbo this was a bug on ios which has been fixed recently, see AR-js-org/AR.js#235. You have to set the additional option playsinline to true when creating the video element. If you look at the PR you should be able to figure out the code change you need to make, let me know if not,
    @lysek thanks for that, this is a known problem. Are you happy submitting a PR to the repo?
    @KCoulter14 the text should not lock to the camera as long as you create an <a-entity text="..."> or <a-text> and set the gps-entity-place or gps-projected-entity-place component to the appropriate latitude and longitude. If you look at the 'connecting to a web API' example at https://ar-js-org.github.io/AR.js-Docs/location-based-tutorial/ this gives an example of what to do.
    Hello all, I tried for a long time to change the gltf model but it doesn't work... That's why I would like to ask you what is wrong in my code?
    Thnk you for help
    @JoeSeger Did you make any improvements to the stability of the object?
    @julienhirsch You might be having issues access the model or the model itself might be corrupt. Try to download the model and serve it locally
    Joseph Seger
    @qu1ckdry Not really I think I am going to go back to using a marker instead of an image.
    Jiří Lýsek
    @nickw1_gitlab I would rather leave it to somebody who is more oriented and committed in this project, feel free to use my code in any way :-)
    @JoeSeger Do you find stability with the marker good enough? I know it's hard to define what 'good enough' is! gltf files seem to work quite well for me but THREE geometry isn't as good.
    Christopher Warner
    Hi all, Currently working on a augmented reality project using ar.js. Mobile browsers are getting 60FPS consistently. Desktop browser is getting 20-30FPS average. Any body have an advice/experience with this issue?
    Hey guys, this project combines Unity Game Engine with AR.js so you can build AR projects in Unity. This opens up so much possibilities! https://github.com/ToughNutToCrack/ARWT
    The project is looking for devs to help flesh it out! If you have some know how, please help to develop this project even further!
    It currently has only Marker Detection so the other types of detection : Image and location would help to flesh it out. The original devs are slowly working on the project (hasnt been updated since December) since the are swamped with other projects!
    Check out their CrashARDemo, its a really impressive achievement!
    Ashinka Arts

    Hello Everyone -
    I am looking to create a virtual gallery. I want to hang pictures and place objects on surfaces (walls, tables, outside on pavement) and also be location aware. How can I achieve this? Thought using three.js and ar.js would give something. But not sure how to proceed. Mainly surface detection using AR.js. Is it possible to do this with the below libraries?
    (AR.js with Image Tracking + Location Based AR)

    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">

    <script src="https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-nft.js">

    Thanks in advance!

    Ashif Ismail
    Hi guys, in aframe for ios i have a weird pink dialog which have no message on loading the site
    how to avoid this ?
    Colton Lee
    Hey all, hoping someone can help. I'm using location based, set my GPS coordinates on a gltf-model but can't see it nearby. How can I render the distance to the object? Anyone have an example? Thanks!
    @nickw1_gitlab Thanks a lot, it's working perfect now 🙏🏽
    Pritam Gupta
    heyy guys, i want a very urgent helpp, iam making a location based web app , but i am not set the gps-entity-place attritube dynamically using javascript. when i inspect the elemtn, i see '<a entity gps-enity-place rotation >' . the value of gps-entity-place is been showing . what should i doo. please its very ugent. thanyou
    I've been working on a location-based ar.js project for a few months now and still cannot get it to work, just constant issues. I'm tearing my hair out - is anyone able to help? Will pay your time!
    Is it possible to disable this prompt?
    Dana Carroll
    Morning! I was just wondering if it was possible to use marker tracking and location tracking within the same scene? Different models just being loaded differently, so far I haven't had any luck trying and was just wondering if it was a possibility
    Hello, everyone
    How are you? I am a newbie in AR.js
    I am developing a location-based ar web app
    If anyone has a sample that working well, can you send me the code, please?
    What's wrong in here? I can not see anything, on the positions