<!DOCTYPE html>
<html>
<head>
<title>Custom components - 04 - Different entities</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("my-count", {
schema: {
entity1: { type: "selector" },
entity2: { type: "selector" },
event: { type: "string", default: "myevent" },
},
init: function () {
this.clicksOnEntity1 = 0;
this.clicksOnEntity2 = 0;
this.data.entity1.addEventListener(
"click",
this.onClickEntity1.bind(this)
);
this.data.entity2.addEventListener(
"click",
this.onClickEntity2.bind(this)
);
},
onClickEntity1: function () {
this.clicksOnEntity1++;
this.check();
},
onClickEntity2: function () {
this.clicksOnEntity2++;
this.check();
},
check: function () {
console.log(this.clicksOnEntity1, this.clicksOnEntity2);
if (this.clicksOnEntity1 > 1 && this.clicksOnEntity2 > 1) {
console.log("emitting event myevent");
this.el.emit(this.data.event);
}
},
});
</script>
<script src="../js/livecode.js"></script>
</head>
<body>
<a-scene cursor="rayOrigin: mouse">
<a-box
my-count="entity1: #box1; entity2: #box2"
position="0 1.6 -3"
color="yellow"
animation="property: rotation; to: 0 360 0; startEvents: myevent; loop:true"
></a-box>
<a-box
id="box1"
color="red"
position="-1 1.6 -1"
width="0.1"
height="0.1"
depth="0.1"
></a-box>
<a-box
id="box2"
color="blue"
position="1 1.6 -1"
width="0.1"
height="0.1"
depth="0.1"
></a-box>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>