<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene
vr-mode-ui="enabled: false;"
loading-screen="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
id="scene"
embedded
>
<a-marker
id="animated-marker"
type="pattern"
preset="custom"
url="assets/marcador.patt"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
id="markerA"
>
<a-entity
id="model1"
scale="0.5 0.5 0.5"
gltf-model="assets/Radiotelefono.glb"
position="0 0 0"
animation="property: rotation; to: 0 0 360; loop: true; dur: 10000"
visible="false"
></a-entity>
<a-entity
id="model2"
scale="0.5 0.5 0.5"
gltf-model="assets/IMTS.glb"
position="0 0 0"
animation="property: rotation; to: 0 0 360; loop: true; dur: 10000"
visible="false"
></a-entity>
<a-entity
id="model3"
scale="0.5 0.5 0.5"
gltf-model="assets/telefonoViejo2.glb"
position="0 0 0"
animation="property: rotation; to: 0 0 360; loop: true; dur: 10000"
visible="false"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
<button onclick="play()" style="position: fixed; top: 15px; left: 15px; z-index: 99999; ">Play</button>
<script>
var models = [
{ id: "model1", duration: 10000 },
{ id: "model2", duration: 20000 },
{ id: "model3", duration: 30000 }
];
var currentIndex = 0;
var timerId;
function play() {
var currentModel = document.querySelector("#" + models[currentIndex].id);
var previousModel = document.querySelector("#" + models[(currentIndex - 1 + models.length) % models.length].id); // obtiene el modelo anterior
currentModel.setAttribute("visible", true);
previousModel.setAttribute("visible", false); // oculta el modelo anterior
timerId = setTimeout(function() {
currentModel.setAttribute("visible", false);
currentIndex = (currentIndex + 1) % models.length;
play();
}, models[currentIndex].duration);
}
</script>
</body>
</html>
Puedes utilizar el evento markerFound proporcionado por AR.js para mostrar una alerta cada vez que se detecta el marcador. Puedes agregar el siguiente código después de la definición de la escena en el HTML:
<script>
var sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener('markerFound', function(e) {
alert('Marcador detectado!');
});
</script>
Este código escucha el evento markerFound en la escena y muestra una alerta cada vez que se detecta un marcador. Puedes personalizar el mensaje de alerta según tus necesidades.
Y si queremos que finalice con el ultimo modelo y luego reinicie la experiencia usamos este
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene
vr-mode-ui="enabled: false;"
loading-screen="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
id="scene"
embedded
>
<a-marker
id="animated-marker"
type="pattern"
preset="custom"
url="assets/marker.patt"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
id="markerA"
>
<a-entity
id="model1"
scale="0.3 0.3 0.3"
gltf-model="assets/Radiotelefono.glb"
position="0 0 0"
animation="property: rotation; to: 0 0 360; loop: true; dur: 10000"
visible="false"
></a-entity>
<a-entity
id="model2"
scale="0.8 0.8 0.8"
gltf-model="assets/IMTS.glb"
position="0 0 0"
animation="property: rotation; to: 0 0 360; loop: true; dur: 10000"
visible="false"
></a-entity>
<a-entity
id="model3"
scale="0.3 0.3 0.3"
gltf-model="assets/telefonoViejo2.glb"
position="0 0 0"
animation="property: rotation; to: 0 0 360; loop: true; dur: 10000"
visible="false"
></a-entity>
<a-entity
id="model4"
scale="1.5 1.5 1.5"
gltf-model="assets/interrogacion.glb"
position="0 0 0"
animation="property: rotation; to: 0 0 360; loop: true; dur: 10000"
visible="false"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
<!-- <button onclick="play()" style="position: fixed; top: 15px; left: 15px; z-index: 99999; ">Play</button> -->
<script>
// var sceneEl = document.querySelector('a-scene');
// sceneEl.addEventListener('markerFound', function(e) {
// play();
// });
var sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener("markerLost", function(e) {
currentIndex = 0; // reinicia el índice
for (var i = 0; i < models.length; i++) {
var model = document.querySelector("#" + models[i].id);
model.setAttribute("visible", false); // oculta todos los modelos
}
});
sceneEl.addEventListener("markerFound", function(e) {
play(); // inicia la secuencia
});
var models = [
{ id: "model1", duration: 10000 },
{ id: "model2", duration: 20000 },
{ id: "model3", duration: 30000 },
{ id: "model4", duration: 40000 }
];
var currentIndex = 0;
var timerId;
function play() {
var currentModel = document.querySelector("#" + models[currentIndex].id);
var previousModel = document.querySelector("#" + models[(currentIndex - 1 + models.length) % models.length].id); // obtiene el modelo anterior
currentModel.setAttribute("visible", true);
previousModel.setAttribute("visible", false); // oculta el modelo anterior
// timerId = setTimeout(function() {
// currentModel.setAttribute("visible", false);
// currentIndex = (currentIndex + 1) % models.length;
// play();
// }, models[currentIndex].duration);
// }
if (models[currentIndex].id === "model4") {
clearTimeout(timerId); // detiene el temporizador
} else {
timerId = setTimeout(function() {
currentModel.setAttribute("visible", false);
currentIndex = (currentIndex + 1) % models.length;
play();
}, models[currentIndex].duration);
}
}
</script>
</body>
</html>