<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://unpkg.com/aframe-proxemic-component@0.0.17/dist/aframe-proxemic-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
<script>
AFRAME.registerComponent("my-debug", {
init: function () {
let _this = this;
this._hasStats = false;
let scene = this.el.sceneEl;
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener("loaded", run);
}
function run() {
console.log(scene.hasAttribute("stats"));
if (scene.hasAttribute("stats")) {
_this._hasStats = true;
_this._curPosition = new THREE.Vector3();
_this._curRotation = new THREE.Vector3();
}
}
},
tick: function () {
if (this._hasStats) {
if (!this._statsPanel) {
this._statsPanel = document.querySelector(".rs-base");
let statsPanelContainer =
this._statsPanel.querySelector(".rs-container");
let title = document.createElement("h1");
title.innerText = this.el.tagName;
statsPanelContainer.appendChild(title);
let container = document.createElement("div");
container.classList.add("rs-group");
let counterBasePosition = document.createElement("div");
counterBasePosition.classList.add("rs-counter-base");
counterBasePosition.innerHTML =
'<span class="rs-counter-id">Position</span>';
this._containerPosition = document.createElement("div");
this._containerPosition.classList.add("rs-counter-value");
this._containerPosition.style = "width: 200px";
counterBasePosition.appendChild(this._containerPosition);
container.appendChild(counterBasePosition);
let counterBaseRotation = document.createElement("div");
counterBaseRotation.classList.add("rs-counter-base");
counterBaseRotation.innerHTML =
'<span class="rs-counter-id">Rotation</span>';
this._containerRotation = document.createElement("div");
this._containerRotation.classList.add("rs-counter-value");
this._containerRotation.style = "width: 200px";
counterBaseRotation.appendChild(this._containerRotation);
container.appendChild(counterBaseRotation);
statsPanelContainer.appendChild(container);
console.log(this._statsPanel);
}
this._curPosition.copy(
this.el.object3D.getWorldPosition(this._curPosition)
);
this._curPosition.x = this._curPosition.x.toFixed(3);
this._curPosition.y = this._curPosition.y.toFixed(3);
this._curPosition.z = this._curPosition.z.toFixed(3);
let quaternion = new THREE.Quaternion();
this.el.object3D.getWorldQuaternion(quaternion);
let euler = new THREE.Euler();
euler.setFromQuaternion(quaternion, "XZY");
this._curRotation.copy(euler);
this._curRotation.x = THREE.Math.radToDeg(
this._curRotation.x
).toFixed(3);
this._curRotation.y = THREE.Math.radToDeg(
this._curRotation.y
).toFixed(3);
this._curRotation.z = THREE.Math.radToDeg(
this._curRotation.z
).toFixed(3);
this._containerPosition.innerText = `${this._curPosition.x} ${this._curPosition.y} ${this._curPosition.z}`;
this._containerRotation.innerText = `${this._curRotation.x} ${this._curRotation.y} ${this._curRotation.z}`;
}
},
});
</script>
</head>
<body>
<a-scene
embedded
arjs="sourceType:webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
>
<a-assets>
<img
id="tron1"
src="https://cdn.glitch.me/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fvlcsnap-2021-08-12-18h57m26s414.png?v=1633700386840"
/>
<img
id="tron2"
src="https://cdn.glitch.me/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fvlcsnap-2019-10-19-23h28m36s643.png?v=1633701130163"
/>
<img
id="tron3"
src="https://cdn.glitch.me/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fvlcsnap-2019-10-19-23h21m20s409.png?v=1633701405872"
/>
</a-assets>
<a-plane
width="15"
height="15"
color="white"
opacity="0.9"
position="0 0 -10"
></a-plane>
<a-box my-debug scale="0.2 0.2 0.2" color="red" position="-2 0 -5" proximity-sensor="distance: 0.5; target: a-marker[value='0']"
event-set__proximityenter="color: blue"
event-set__proximityexit="color: red"></a-box>
<a-entity camera>
<a-entity scale="-1 1 1">
<a-marker my-debug type="barcode" value="0">
<a-image
src="#tron2"
width="1"
height="1"
rotation="-90 0 0"
></a-image>
</a-marker>
</a-entity
></a-entity>
</a-scene>
</body>
</html>