Google cardboard 6DoF vr/ar

3 weeks ago 17

ARTICLE AD BOX

I built myself a vr Google cardboard style visor but with a hole for the camera.

Now I did handheld AR with 6DoF and stereo VR with 3DoF. See below code.

The problem that I'm facing is that I want to do a web that's is stereo vision for cardboard but with 6DoF for both AR/VR. Is there any way to achieve that?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>DIY Cardboard 6DoF AR</title> <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script> <style> body { margin: 0; overflow: hidden; background-color: #000; } /* The video feed stays behind the 3D scene */ #video-feed { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } /* Help align the Cardboard center divider */ .guide-line { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.2); z-index: 10; pointer-events: none; display: none; } </style> </head> <body> <div class="guide-line" id="centerLine"></div> <video id="video-feed" autoplay playsinline></video> <a-scene renderer="alpha: true; antialias: true; colorManagement: true;" webxr="referenceSpaceType: local-floor; requiredFeatures: local-floor;"> <a-entity id="rig"> <a-camera id="cam" look-controls wasd-controls position="0 1.6 0"> <a-cursor color="yellow"></a-cursor> </a-camera> </a-entity> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-grid position="0 0 0" rotation="-90 0 0" width="10" height="10" opacity="0.1"></a-grid> <a-sky color="black" opacity="0"></a-sky> </a-scene> <script> const video = document.getElementById('video-feed'); const scene = document.querySelector('a-scene'); const line = document.getElementById('centerLine'); // 1. Start the camera feed async function startCamera() { try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }); video.srcObject = stream; } catch (err) { console.error("Camera access denied:", err); alert("Please allow camera access for AR Passthrough."); } } // 2. Handle Stereo UI scene.addEventListener('enter-vr', () => { line.style.display = 'block'; // Force the background to be transparent in VR mode scene.renderer.setClearColor(0x000000, 0); }); scene.addEventListener('exit-vr', () => { line.style.display = 'none'; }); // Initialize startCamera(); </script> </body> </html>