I’m encountering difficulties loading assets locally on my desktop without an internet connection. I’ve correctly placed them in the designated folder, but they are not rendering as expected.
I’m using [AR js studio] and attempting to load using [pattern].
I’ve reviewed the console logs for any relevant error messages but haven’t found any. I’ve also tried opening the assets directly in a web browser, and they display correctly.
Could you please assist me in resolving this issue?
<!DOCTYPE html>
<html>
<head>
<title>AR Video Marker</title>
<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>
<script>
AFRAME.registerComponent('videohandler', {
init()
{
const marker = this.el;
const video = document.querySelector('#vid');
marker.addEventListener('markerFound', () => {
video.play();
});
marker.addEventListener('markerLost', () => {
video.pause();
});
}
});
</script>
</head>
<body style="margin: 0; overflow: hidden">
<a-scene vr-mode-ui="false" loading-screen="false" arjs="sourceType: webcam">
<a-assets>
<video id="vid" src="path/to/your/video.mp4" preload="auto" loop crossorigin playsinline autoplay></video>
</a-assets>
<a-marker type="pattern" preset="custom" url="path/to/your/marker.patt" videohandler smooth>
<a-video src="#vid" scale="1.9 2.5 0" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>