Tips 1 : Touch the object with the cursor

1. Introduction

Detect the moment the cursor touches an object

This section, we use some of the scripts from Tutorial 3 : Change 3D objects displaying on the marker

code: webar_santa.html

<!doctype HTML>

<html>

<head>

</head>

<a-scene embedded arjs="debugUIEnabled: false;" vr-mode-ui="enabled: false;">

<a-assets>

<a-asset-item id="santa-obj" src="santa_model/santa.gltf"></a-asset-item>

</a-assets>

<a-marker preset="hiro">

</a-marker>

<a-entity camera>

</a-entity>

</a-scene>

</body>

</html>

2. Add cursor

The cursor component can be used for gaze-based interaction

The a-cursor is usually placed as a child of the camera tag

code: html

<a-entity camera>

<a-cursor></a-cursor>

</a-entity>

3. Add the script

Add the script recognizing collision with objects and processing after the click

We use "click_alert" in this section, but you can decide the name freely

https://aframe.io/docs/1.2.0/components/cursor.html

!Note: This method can not get touch events when the system enable immersive XR on mobile (mouse click is worked)

!If you want to get touch event, use WebXR DOM Overlay and overlay the UI on the AR mode screen

code: html

<head>

AFRAME.registerComponent('click_alert',{

init: function () {

this.el.addEventListener('click', function(){

<--! Add Operations HERE -->

alert("test");

});

}

});

</script>

</head>

4. Assign events to the object

Add event "click_alert" into the a-entity or other object tags

code:html

<a-marker preset="hiro">

<a-entity click_alert gltf-model="#santa-obj" position="0 0 0" rotation="0 0 0" scale="0.5 0.5 0.5">

</a-entity>

</a-marker>

5. Publish

Finally, Publish the file to the web

The final script is as follows

code: webar_interact_object.html

<!doctype html>

<html>

<head>

AFRAME.registerComponent('click_alert',{

init: function () {

this.el.addEventListener('click', function(){

alert("test");

});

}

});

</script>

</head>

<a-scene embedded arjs>

<a-assets>

<a-asset-item id = "santa_obj" src = "santa_hat/santa.gltf"></a-asset-item>

</a-assets>

<a-marker preset = "hiro">

<a-entity click_alert gltf-model="#santa_obj" position="0 0 0" rotation = "0 0 0" scale = "0.5 0.5 0.5"></a-entity>

</a-marker>

<a-entity camera>

<a-cursor></a-cursor>

</a-entity>

</a-scene>

</body>

</html>