fcor / arjs-gestures

Rotate and zoom with touch gestures on any Image tracking or Marker Based AR.js scene

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nice work! How to change the marker?Thank you!

gascendcn opened this issue · comments

Nice work! How to change the marker?Thank you!

Hello! you can try using barcode markers, which are part of AR.js core.

Here's the full collection of barcodes:
https://github.com/nicolocarpignoli/artoolkit-barcode-markers-collection

This is how you can select any of the presets:

'3x3': artoolkit.AR_MATRIX_CODE_3x3,
'3x3_HAMMING63': artoolkit.AR_MATRIX_CODE_3x3_HAMMING63,
'3x3_PARITY65': artoolkit.AR_MATRIX_CODE_3x3_PARITY65,
'4x4': artoolkit.AR_MATRIX_CODE_4x4,
'4x4_BCH_13_9_3': artoolkit.AR_MATRIX_CODE_4x4_BCH_13_9_3,
'4x4_BCH_13_5_5': artoolkit.AR_MATRIX_CODE_4x4_BCH_13_5_5,

And here's an example:

 <a-scene
      embedded
      arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3_HAMMING63;"
      renderer="logarithmicDepthBuffer: true;"
      vr-mode-ui="enabled: false"
    >
      <a-assets>
        <a-asset-item id="bowser" src="../assets/bowser.glb"></a-asset-item>
      </a-assets>
      <a-marker type="barcode" value="0">
         <a-entity
          position="0 0 1"
          scale="0.1 0.1 0.1"
          rotation="-90 0 0"
          gltf-model="#bowser"
        ></a-entity>
      </a-marker>
      <a-marker type="barcode" value="1">
        <a-entity
          position="0 0 1"
          scale="0.1 0.1 0.1"
          rotation="90 180 0"
          gltf-model="#bowser"
        ></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>

Once you have this up and runnng you should just gesture components exactly as on marker examples and that's it. Keep in mind that gestures only work with one marker at a time. If you have multiple markers you need some logic to select with model will be modified by gesture events.