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>
<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/[email protected]/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 style="margin: 0; overflow: hidden;">
<a-scene
        class="aframebox" device-orientation-permission-ui="enabled: true" vr-mode-ui="enabled: false" emitevents="true"
        cursor="rayOrigin: mouse; fuse: true; fuseTimeout: 0;" embedded
>
    <a-assets>
        <a-asset-item id="Duck" src="https://www.zamit.one/location/Duck/Duck.gltf"></a-asset-item>
    </a-assets>
    <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>
        </a-camera>
</a-scene>
</body>
</html>

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

EDIT

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?

Answer

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

https://aframe.io/docs/1.0.0/components/look-controls.html

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">
</a-camera>