fcor/arjs-gestures

Disable vertical rotation

Opened this issue · 7 comments

mr339 commented

Is there a way to disable the vertical rotation and only allow horizontal rotation of the models?

fcor commented

Yes, on gesture-handler you can edit the handleRotation function according to your needs.

Right now is rotating on X and Y axis but you can just delete the one you don't need.

  • 🎉1
mr339 commented

Yes, on gesture-handler you can edit the handleRotation function according to your needs.

Right now is rotating on X and Y axis but you can just delete the one you don't need.

Thanks @fcor , it worked beautifully, i had another question. Does this work on mind-ar-js(https://hiukim.github.io/mind-ar-js-doc/) image tracking as well? i tried adding all the necessary attributes like gesture-detector, gesture-handlers but it doesn't seem to work.Is it because these attributes are specific to , tags? and since mindar uses different tags to render the 3d models.

AdamVI2 commented

I have tested gestures.js with mindar.js and it seems to work if you use workaround from #15 to switch off marker-based checking.

I used the Image Tracking Basic example (https://hiukim.github.io/mind-ar-js-doc/examples/basic) and added gesture-handler to both entities (a-plane and a-gltf-model) - both were scaling and rotating properly.

       <a-entity mindar-image-target="targetIndex: 0">
            <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0" object-detection gesture-handler="minScale: 0.5; maxScale: 10; locationBased: true;"></a-plane>
            <a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel" object-detection gesture-handler="minScale: 0.5; maxScale: 10; locationBased: true;">
        </a-entity>

I also added a parent entity to both a-plane and a-gltf-model objects and used it as a rig for gestures for both and it worked fine.

      <a-entity mindar-image-target="targetIndex: 0">
            <a-entity gesture-handler="minScale: 0.5; maxScale: 10; locationBased: true;">
                <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
                <a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel"
                >
            </a-antity>
        </a-entity>

So yes, with simple modifications it works pretty well as long as targeting A-Frame based objects I guess :)

  • 🎉1
mr339 commented

I have tested gestures.js with mindar.js and it seems to work if you use workaround from #15 to switch off marker-based checking.

I used the Image Tracking Basic example (https://hiukim.github.io/mind-ar-js-doc/examples/basic) and added gesture-handler to both entities (a-plane and a-gltf-model) - both were scaling and rotating properly.

       <a-entity mindar-image-target="targetIndex: 0">
            <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0" object-detection gesture-handler="minScale: 0.5; maxScale: 10; locationBased: true;"></a-plane>
            <a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel" object-detection gesture-handler="minScale: 0.5; maxScale: 10; locationBased: true;">
        </a-entity>

I also added a parent entity to both a-plane and a-gltf-model objects and used it as a rig for gestures for both and it worked fine.

      <a-entity mindar-image-target="targetIndex: 0">
            <a-entity gesture-handler="minScale: 0.5; maxScale: 10; locationBased: true;">
                <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
                <a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel"
                >
            </a-antity>
        </a-entity>

So yes, with simple modifications it works pretty well as long as targeting A-Frame based objects I guess :)

Oh! thanks, i'll also give this one a try in a while.

fcor commented

@AdamVI2 Thanks for your help :)

mihk03 commented

Yes, on gesture-handler you can edit the handleRotation function according to your needs.

Right now is rotating on X and Y axis but you can just delete the one you don't need.

When deleting the y axis I think I messed up the code. I will be very grateful if you can provide me with the code with disabled y axis and scale for the 3d model. Thanks!

SwaggerNiels commented

I have tested gestures.js with mindar.js and it seems to work if you use workaround from #15 to switch off marker-based checking.

I used the Image Tracking Basic example (https://hiukim.github.io/mind-ar-js-doc/examples/basic) and added gesture-handler to both entities (a-plane and a-gltf-model) - both were scaling and rotating properly.

       <a-entity mindar-image-target="targetIndex: 0">
            <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0" object-detection gesture-handler="minScale: 0.5; maxScale: 10; locationBased: true;"></a-plane>
            <a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel" object-detection gesture-handler="minScale: 0.5; maxScale: 10; locationBased: true;">
        </a-entity>

I also added a parent entity to both a-plane and a-gltf-model objects and used it as a rig for gestures for both and it worked fine.

      <a-entity mindar-image-target="targetIndex: 0">
            <a-entity gesture-handler="minScale: 0.5; maxScale: 10; locationBased: true;">
                <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
                <a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel"
                >
            </a-antity>
        </a-entity>

So yes, with simple modifications it works pretty well as long as targeting A-Frame based objects I guess :)

Hi Adam,
That sound very cool!
I know it is a while back, but perhaps you still know how to work with the MindAR package.
I also want gestures to control my gltf model while also using the AR camera.

I have the following
Could you help me with this?

    <a-scene 
      mindar-image="imageTargetSrc: ./assets/mytarget.mind; filterMinCF:0.0001; filterBeta: 0.00001; warmupTolerance: 5; missTolerance: 30;"
      color-space="sRGB"
      renderer="colorManagement: true, physicallyCorrectLights: true, sortObjects: true, premultipliedAlpha: true, logarithmicDepthBuffer="true"
      vr-mode-ui="enabled: false" 
      device-orientation-permission-ui="enabled: false"
      gesture-detector
      >
      
	    <a-light id="dirlight" intensity="1" light="castShadow:true;type:directional" position="1 1 1"></a-light>
      
      <a-assets>
        <a-asset-item id="avatarModel" src="./assets/mygltf.gltf"></a-asset-item>
      </a-assets>
      
      <a-entity light="type: ambient; color: #CCC"></a-entity>
      
      <!-- Make sure to set the gltf object alpha blend on if you want transparency -->
      <a-entity id="myobject" myobject mindar-image-target="targetIndex: 0">
          <a-gltf-model rotation="0 0 0 " position="0 0 0" scale="0.4 0.4 0.4" src="#avatarModel" animation-mixer="timeScale:0" gltf-name-tag
          gesture-handler>
      </a-entity>

      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
    </a-scene>

basically your implemented it like you said. I could however not put any locationBased toggle in there, because it gives me an error message.
Still I see nothing happening here..

What is the problem here, do you think?