search

hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
MIT License
2.13k stars 394 forks source link

Is there any way to manipulate 3D content #402

Closed binhudakhalid closed 1 year ago

binhudakhalid commented 1 year ago

For example like this

I have tried it but it not working. My code is given below


<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.0/dist/mindar-image-aframe.prod.js"></script>
    <script src="gesture-detector.js"></script>
    <script src="gesture-handler.js"></script>
  </head>
<!--working fine-->
  <body>
    <a-scene mindar-image="filterMinCF:0.0001; filterBeta: 0.001; imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/band-example/band.mind;" 
    color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" 
    vr-mode-ui="enabled: false" 
    device-orientation-permission-ui="enabled: false"  
    gesture-detector
    id="scene"
    renderer="logarithmicDepthBuffer: true;"
    embedded>

      <a-assets>
    <a-asset-item id="bearModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/band-example/bear/scene.gltf"></a-asset-item>
    <a-asset-item id="raccoonModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/band-example/raccoon/scene.gltf"></a-asset-item>
  <a-asset-item id="pizza" src="./plain_pizza_slice.glb"></a-asset-item>

      </a-assets>

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

    <!--  <a-entity mindar-image-target="targetIndex: 0" class="clickable" gesture-handler>
        <a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="0.05 0.05 0.05" src="#raccoonModel">
      </a-gltf-model>
      -->

      <a-entity 
      mindar-image-target="targetIndex: 0" 
      class="clickable" 
      id="bowser-model"
      gltf-model="#pizza"
      position="0 0 0"
      scale="0.3 0.3 0.3"   
      class="clickable"
      gesture-handler
    > </a-entity>

      </a-entity>
      <a-entity mindar-image-target="targetIndex: 1" class="clickable" gesture-handler>
    <a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="4 4 4" src="#pizza" gesture-handler>
      </a-entity>
    </a-scene>
  </body>
</html>
hiukim commented 1 year ago

That library you are using doesn't work probably because it's trying to manipulate the camera pose with the gesture. MindAR needs to control the camera, so that will fail.

To achieve something like this, you need to manipulate the pose of the 3D objects with the gesture. e.g. rotate/scale the <a-gltf-model />