| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MorphoWeb 3D - VR/AR Experience</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> |
| <style> |
| .vr-card { |
| perspective: 1000px; |
| height: 300px; |
| } |
| .vr-card-inner { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| transition: transform 0.6s; |
| transform-style: preserve-3d; |
| } |
| .vr-card:hover .vr-card-inner { |
| transform: rotateY(180deg); |
| } |
| .vr-card-front, .vr-card-back { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| backface-visibility: hidden; |
| border-radius: 1rem; |
| overflow: hidden; |
| } |
| .vr-card-back { |
| transform: rotateY(180deg); |
| background-color: #111827; |
| color: white; |
| padding: 1.5rem; |
| } |
| #ar-viewer { |
| width: 100%; |
| height: 500px; |
| background-color: #f3f4f6; |
| border-radius: 0.5rem; |
| margin: 2rem 0; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen"> |
| <nav class="bg-white shadow-sm py-4 px-6"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="globe" class="text-indigo-600"></i> |
| <h1 class="text-xl font-bold">MorphoWeb 3D VR/AR</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="index.html" class="hover:text-indigo-600">Home</a> |
| <a href="pro.html" class="hover:text-indigo-600">Editor</a> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="container mx-auto px-6 py-12"> |
| <div class="text-center mb-12"> |
| <h2 class="text-4xl font-bold mb-4">Immersive VR & AR Experiences</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Bring your 3D creations to life with our virtual and augmented reality integrations. Preview and interact with your designs in immersive environments. |
| </p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> |
| |
| <div class="vr-card bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="vr-card-inner"> |
| <div class="vr-card-front"> |
| <img src="http://static.photos/technology/1024x576/1" alt="VR Experience" class="w-full h-full object-cover"> |
| </div> |
| <div class="vr-card-back"> |
| <h3 class="text-2xl font-bold mb-3">Virtual Reality Mode</h3> |
| <p class="mb-4">Fully immerse yourself in your 3D creations with VR headset support. Navigate and edit your projects in a virtual space.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-indigo-900 text-indigo-100 text-xs px-2 py-1 rounded">Oculus</span> |
| <span class="bg-indigo-900 text-indigo-100 text-xs px-2 py-1 rounded">HTC Vive</span> |
| <span class="bg-indigo-900 text-indigo-100 text-xs px-2 py-1 rounded">WebXR</span> |
| </div> |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700"> |
| Launch VR Editor |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="vr-card bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="vr-card-inner"> |
| <div class="vr-card-front"> |
| <img src="http://static.photos/technology/1024x576/2" alt="AR Experience" class="w-full h-full object-cover"> |
| </div> |
| <div class="vr-card-back"> |
| <h3 class="text-2xl font-bold mb-3">Augmented Reality Mode</h3> |
| <p class="mb-4">Place your 3D designs in the real world using your device's camera. Perfect for previewing products in physical spaces.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-purple-900 text-purple-100 text-xs px-2 py-1 rounded">ARKit</span> |
| <span class="bg-purple-900 text-purple-100 text-xs px-2 py-1 rounded">ARCore</span> |
| <span class="bg-purple-900 text-purple-100 text-xs px-2 py-1 rounded">WebAR</span> |
| </div> |
| <button id="start-ar" class="bg-purple-600 text-white px-6 py-2 rounded-md hover:bg-purple-700"> |
| Start AR Experience |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-12"> |
| <h3 class="text-2xl font-bold mb-4 flex items-center"> |
| <i data-feather="box" class="text-indigo-600 mr-2"></i> |
| AR Product Preview |
| </h3> |
| <p class="text-gray-600 mb-6"> |
| Scan this QR code with your mobile device or click below to launch the AR viewer directly. |
| </p> |
| |
| <div class="flex flex-col md:flex-row items-center justify-between"> |
| <div id="ar-viewer" class="mr-0 md:mr-6 mb-6 md:mb-0"> |
| <a-scene embedded arjs="sourceType: webcam;"> |
| <a-marker preset="hiro"> |
| <a-box position="0 0.5 0" material="color: #4f46e5;"></a-box> |
| </a-marker> |
| <a-entity camera></a-entity> |
| </a-scene> |
| </div> |
| |
| <div class="text-center"> |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://morphoweb3d.com/ar-viewer" alt="AR QR Code" class="w-48 h-48 mx-auto mb-4"> |
| <button class="bg-indigo-600 text-white px-6 py-3 rounded-md hover:bg-indigo-700 flex items-center mx-auto"> |
| <i data-feather="smartphone" class="mr-2"></i> Open on Mobile |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h3 class="text-2xl font-bold mb-4 flex items-center"> |
| <i data-feather="video" class="text-purple-600 mr-2"></i> |
| VR Showcase Examples |
| </h3> |
| <p class="text-gray-600 mb-6"> |
| Explore these stunning VR experiences created with MorphoWeb 3D. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="bg-gray-50 rounded-lg overflow-hidden"> |
| <img src="http://static.photos/technology/640x360/3" alt="VR Example 1" class="w-full h-48 object-cover"> |
| <div class="p-4"> |
| <h4 class="font-bold mb-2">E-commerce Showroom</h4> |
| <p class="text-sm text-gray-600 mb-3">Interactive product showcase in VR</p> |
| <button class="text-indigo-600 text-sm font-medium flex items-center"> |
| View in VR <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg overflow-hidden"> |
| <img src="http://static.photos/technology/640x360/4" alt="VR Example 2" class="w-full h-48 object-cover"> |
| <div class="p-4"> |
| <h4 class="font-bold mb-2">Architectural Walkthrough</h4> |
| <p class="text-sm text-gray-600 mb-3">Explore buildings before they're built</p> |
| <button class="text-indigo-600 text-sm font-medium flex items-center"> |
| View in VR <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg overflow-hidden"> |
| <img src="http://static.photos/technology/640x360/5" alt="VR Example 3" class="w-full h-48 object-cover"> |
| <div class="p-4"> |
| <h4 class="font-bold mb-2">Educational Experience</h4> |
| <p class="text-sm text-gray-600 mb-3">Interactive learning in virtual environments</p> |
| <button class="text-indigo-600 text-sm font-medium flex items-center"> |
| View in VR <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| feather.replace(); |
| |
| |
| document.getElementById('start-ar').addEventListener('click', () => { |
| if (navigator.xr) { |
| navigator.xr.isSessionSupported('immersive-ar').then((supported) => { |
| if (supported) { |
| |
| window.location.href = "https://morphoweb3d.com/ar-viewer"; |
| } else { |
| alert("AR is not supported on your device. Please try on a compatible smartphone or tablet."); |
| } |
| }); |
| } else { |
| alert("WebXR is not supported in your browser. Please try Chrome or Firefox Reality."); |
| } |
| }); |
| |
| |
| const scene = document.querySelector('a-scene'); |
| if (scene.hasLoaded) { |
| initARScene(); |
| } else { |
| scene.addEventListener('loaded', initARScene); |
| } |
| |
| function initARScene() { |
| |
| } |
| }); |
| </script> |
| </body> |
| </html> |
