I'm trying to implement a code that restricts the camera movement in A-frame. The current functionality teleports the camera back to the position 0, 1.6, 0 when it moves 10 spaces away from the starting point on the x or y axis. However, I want to modify it so that the camera is only teleported back if its y position moves 10 spaces from the starting point. How can I achieve this? Here's the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<meta charset="UTF-8" />
</head>
<body>
<script>
AFRAME.registerComponent('limit-my-distance', {
init: function() {
this.zero = new THREE.Vector3(0, 0, 0);
},
tick: function() {
if (this.el.object3D.position.distanceTo(this.zero) > 10) {
this.el.object3D.position.set(0, 1.6, 0);
}
}
});
</script>
<a-scene>
<a-sphere position="0 2 -10"color="red"></a-sphere>
<a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
<a-camera limit-my-distance></a-camera>
<a-sky color="#fff"></a-sky>
</a-scene>
</body>
</html>