How to detect when a user taps on a 3D model?

Looking to detect when users can successfully see and tap on a treasure chest hidden amongst many 3D models. Any ideas, or projects I could look at that have similar functionality?

Hello!

I’d recommend taking a look at this sample project: A-Frame: Tap to Place Ground | 8th Wall | 8th Wall

When the user taps on the “ground” object in the scene (a transparent plane) it spawns a 3d model at that location.

Some of the key pieces here:

  1. Camera has a raycaster, configured to interact with entities that have the “cantap” class (see A-Frame: Tap to Place Ground | 8th Wall | 8th Wall)
  2. Receiving entity (“ground plane”) configured with class="cantap" to receive raycasts (see A-Frame: Tap to Place Ground | 8th Wall | 8th Wall)
  3. The ground object then has a click event handler (in this case it spawns other 3d models, but you could put your own custom logic there to do something different - A-Frame: Tap to Place Ground | 8th Wall | 8th Wall)

Raycaster documentation: raycaster – A-Frame

Hope this helps!

This is very helpful. Thanks!

1 Like

HI Tony!
I am working on a project where I combine the “World Tracking Portal” with the “Tap to Place Ground” project to create interactions as a part of the portal’s content. So far I have followed the pointers you shared here, but there are a handful of errors that pop up despite modifying the code to fix them. [i.e. 'Unhandled Promise Rejections: TypeError: Cannot read properties of undefined (reading ‘constructor’)].
Is there something that I may be missing out?

When adding in ‘cantap’ it appears to get in the way of placing the portal?

As soon as you add raycaster=“objects: .cantap” to the camera, it takes over from listening for the portal to be placed?

1 Like