AR-js-org / AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.
MIT License
5.41k stars 924 forks source link

Click with a a-entity (gltf) object #559

Open dpayet opened 1 year ago

dpayet commented 1 year ago

Do you want to request a feature or report a bug?

Bug, I think.

What is the current behavior?

An a-entity not clickable. Is it possible ?

If the current behavior is a bug, please provide the steps to reproduce.

   <a-scene
      arjs
      embedded
      renderer="logarithmicDepthBuffer: true;"
      vr-mode-ui="enabled: false"
      gesture-detector
      id="scene"
    >
      <a-assets>
        <a-asset-item
          id="key"
          src="models/key2.glb"
        >
        </a-asset-item>
      </a-assets>

      <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
      <a-camera gps-projected-camera='simulateLatitude: lat; simulateLongitude: lng' rotation-reader></a-camera>

        <a-entity
          id="key-model"
          clicker 
          gps-projected-entity-place='latitude: lat; longitude: lng'
          animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"
          gltf-model="#key"
          position="0 0 0"
          scale="0.03 0.03 0.03"
          gesture-handler
        >
        </a-entity>

      <a-entity camera></a-entity>
    </a-scene>
    <script>
        AFRAME.registerComponent('clicker', {
            init: function() {
                this.el.addEventListener('click', e => {
                    alert('Box clicked!');
                });
            }
        });
</script>

Please mention other relevant information such as the browser version, Operating System and Device Name

I've tried on Safari, Firefox and Chrome, all on iOS.

What is the expected behavior?

Perhaps have a little alert prompt :)

If this is a feature request, what is motivation or use case for changing the behavior?

Thanks you !

nickw1 commented 1 year ago

Hi, can you make your assets publicly available so I can test? Thanks.

nickw1 commented 1 year ago

Hi, I have just realised you're missing the cursor and raycaster components.

Also you have two <a-camera>s, is this intentional?

Have a look at this example:

https://github.com/AR-js-org/AR.js/blob/master/aframe/examples/new-location-based/click-places/index.html

and see if you can get it to work based off that code.

dpayet commented 9 months ago

It's working ! A huge thanks :)