Skip to content

Disable the drag on screen in a-frame AR.js

I am trying to disable the drag feature of A-frame so that if a object is in front of your screen the user can’t just drag on the screen and remove it from your front to other place without even moving. Here is what i have tried with the camera, but still the drag is not disabled:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>GeoAR.js demo</title>
    <script src=""></script>
    <script src="[email protected]/dist/aframe-look-at-component.min.js"></script>
    <script src=""></script>
<body style="margin: 0; overflow: hidden;">
        class="aframebox" device-orientation-permission-ui="enabled: true" vr-mode-ui="enabled: false" emitevents="true"
        cursor="rayOrigin: mouse; fuse: true; fuseTimeout: 0;" embedded
        <a-asset-item id="Duck" src=""></a-asset-item>
    <a-entity gltf-model="#Duck" scale="1 1 1" position="0 -1 -10" ></a-entity>
        <a-camera camera="fov: 80; reverse-mouse-drag:true;"    id="camera"  rotation-reader position="0 1.6 16" listener>

Can anyone help me out with how I can do it?


I have already tried look-controls-enabled="false", but it also binds the 3d-object to the screen i.e. when we turn the phone to different direction the 3d-object also gets stuck to the screen and moves with us.

Is there a way to only disable the touch-drag operation performed by fingers only?


According to the documentation, you can set the look-controls “touchEnabled” property to false, it should solve your issue.

It should do with something like this

<a-camera camera="fov: 80;" id="camera" rotation-reader position="0 1.6 16" listener look-controls="reverseMouseDrag:true; touchEnabled: false">