Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rookus AI - Fashion Metaverse</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow-x: hidden; | |
| font-family: 'Montserrat', sans-serif; | |
| color: white; | |
| background: #000; | |
| } | |
| #canvas-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .blur-bg { | |
| backdrop-filter: blur(10px); | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| .fashion-item-card { | |
| transition: all 0.3s ease; | |
| transform: translateY(0); | |
| } | |
| .fashion-item-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(255, 255, 255, 0.1), 0 10px 10px -5px rgba(255, 255, 255, 0.04); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: white; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| } | |
| .loader-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| border-top-color: white; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .section { | |
| min-height: 100vh; | |
| padding: 100px 0; | |
| position: relative; | |
| } | |
| .parallax-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.3; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-spinner"></div> | |
| <div class="absolute bottom-20 text-center w-full"> | |
| <p class="text-white">Entering Rookus AI Metaverse...</p> | |
| <div class="w-full bg-gray-700 h-1 mt-2 mx-auto max-w-xs"> | |
| <div class="bg-white h-1 w-0" id="progress-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3D Canvas Container --> | |
| <div id="canvas-container"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 w-full z-50 p-6"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="text-2xl font-bold">ROOKUS AI</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link">Home</a> | |
| <a href="#showroom" class="nav-link">Showroom</a> | |
| <a href="#collections" class="nav-link">Collections</a> | |
| <a href="#about" class="nav-link">About</a> | |
| <a href="#contact" class="nav-link">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-10 transition"> | |
| <i class="fas fa-shopping-bag"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-10 transition"> | |
| <i class="fas fa-user"></i> | |
| </button> | |
| <button class="md:hidden p-2 rounded-full hover:bg-white hover:bg-opacity-10 transition" id="mobile-menu-button"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden absolute top-full left-0 w-full bg-black bg-opacity-90 hidden" id="mobile-menu"> | |
| <div class="flex flex-col p-4 space-y-4"> | |
| <a href="#" class="nav-link block py-2">Home</a> | |
| <a href="#showroom" class="nav-link block py-2">Showroom</a> | |
| <a href="#collections" class="nav-link block py-2">Collections</a> | |
| <a href="#about" class="nav-link block py-2">About</a> | |
| <a href="#contact" class="nav-link block py-2">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="section flex items-center justify-center relative"> | |
| <div class="max-w-7xl mx-auto px-6 text-center"> | |
| <h1 class="text-6xl md:text-8xl font-bold mb-6">Fashion <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">Reimagined</span></h1> | |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Step into the Rookus AI Metaverse where fashion meets the future. Explore, create, and shop in our immersive digital world.</p> | |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6"> | |
| <button class="px-8 py-4 bg-white text-black font-bold rounded-full hover:bg-opacity-90 transition">Enter Metaverse</button> | |
| <button class="px-8 py-4 border border-white text-white font-bold rounded-full hover:bg-white hover:bg-opacity-10 transition">View Collections</button> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 w-full flex justify-center animate-bounce"> | |
| <a href="#showroom" class="text-white"> | |
| <i class="fas fa-chevron-down text-2xl"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Showroom Section --> | |
| <section id="showroom" class="section"> | |
| <div class="max-w-7xl mx-auto px-6 py-20"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-16 text-center">Virtual Showroom</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-3xl font-bold mb-6">Experience Fashion in 3D</h3> | |
| <p class="text-lg mb-8">Our virtual showroom allows you to explore our latest collections in an immersive 3D environment. Walk through digital spaces, interact with clothing items, and see how they move in real-time.</p> | |
| <button class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-full hover:opacity-90 transition">Take a Tour</button> | |
| </div> | |
| <div class="relative h-96 rounded-xl overflow-hidden"> | |
| <div id="showroom-viewer" class="absolute inset-0"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-50"> | |
| <div class="flex justify-between items-center"> | |
| <span>Summer 2023 Collection</span> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-10 transition" id="rotate-left"> | |
| <i class="fas fa-undo"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-10 transition" id="rotate-right"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Collections Section --> | |
| <section id="collections" class="section"> | |
| <div class="max-w-7xl mx-auto px-6 py-20"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-16 text-center">Our Collections</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Collection 1 --> | |
| <div class="fashion-item-card blur-bg rounded-xl overflow-hidden"> | |
| <div class="h-64 bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center"> | |
| <div id="collection-1-viewer" class="w-full h-full"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Neon Dreams</h3> | |
| <p class="text-gray-300 mb-4">Futuristic streetwear with glowing accents</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$129 - $299</span> | |
| <button class="px-4 py-2 bg-white text-black text-sm font-bold rounded-full hover:bg-opacity-90 transition">Explore</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Collection 2 --> | |
| <div class="fashion-item-card blur-bg rounded-xl overflow-hidden"> | |
| <div class="h-64 bg-gradient-to-br from-pink-500 to-red-500 flex items-center justify-center"> | |
| <div id="collection-2-viewer" class="w-full h-full"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Digital Flora</h3> | |
| <p class="text-gray-300 mb-4">Nature-inspired patterns with tech fabrics</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$149 - $349</span> | |
| <button class="px-4 py-2 bg-white text-black text-sm font-bold rounded-full hover:bg-opacity-90 transition">Explore</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Collection 3 --> | |
| <div class="fashion-item-card blur-bg rounded-xl overflow-hidden"> | |
| <div class="h-64 bg-gradient-to-br from-blue-500 to-teal-500 flex items-center justify-center"> | |
| <div id="collection-3-viewer" class="w-full h-full"></div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Quantum Threads</h3> | |
| <p class="text-gray-300 mb-4">Smart clothing with adaptive properties</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">$199 - $499</span> | |
| <button class="px-4 py-2 bg-white text-black text-sm font-bold rounded-full hover:bg-opacity-90 transition">Explore</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <button class="px-8 py-4 border border-white text-white font-bold rounded-full hover:bg-white hover:bg-opacity-10 transition">View All Collections</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="section"> | |
| <div class="max-w-7xl mx-auto px-6 py-20"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center"> | |
| <div> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-8">About Rookus AI</h2> | |
| <p class="text-lg mb-6">We're redefining fashion for the digital age. Rookus AI combines cutting-edge artificial intelligence with premium design to create clothing that transcends physical and digital boundaries.</p> | |
| <p class="text-lg mb-8">Our metaverse platform allows you to experience fashion in ways never before possible - try on digital outfits, customize designs in real-time, and purchase both virtual and physical versions of your favorite pieces.</p> | |
| <div class="flex space-x-4"> | |
| <button class="px-6 py-3 bg-white text-black font-bold rounded-full hover:bg-opacity-90 transition">Our Story</button> | |
| <button class="px-6 py-3 border border-white text-white font-bold rounded-full hover:bg-white hover:bg-opacity-10 transition">Meet the Team</button> | |
| </div> | |
| </div> | |
| <div class="relative h-96"> | |
| <div class="absolute inset-0 rounded-2xl overflow-hidden"> | |
| <div id="about-viewer" class="w-full h-full"></div> | |
| </div> | |
| <div class="absolute -bottom-5 -right-5 w-32 h-32 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> | |
| <span class="text-white font-bold text-center">AI-Powered<br>Design</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="section"> | |
| <div class="max-w-7xl mx-auto px-6 py-20"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-16 text-center">Join Our Metaverse</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-16"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Get in Touch</h3> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block mb-2">Name</label> | |
| <input type="text" id="name" class="w-full bg-transparent border-b border-white py-2 focus:outline-none focus:border-pink-500 transition"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2">Email</label> | |
| <input type="email" id="email" class="w-full bg-transparent border-b border-white py-2 focus:outline-none focus:border-pink-500 transition"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full bg-transparent border-b border-white py-2 focus:outline-none focus:border-pink-500 transition"></textarea> | |
| </div> | |
| <button type="submit" class="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-full hover:opacity-90 transition">Send Message</button> | |
| </form> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Metaverse Access</h3> | |
| <p class="mb-8">Download our app to access the full Rookus AI Metaverse experience on your desktop, mobile, or VR headset.</p> | |
| <div class="flex flex-col space-y-4"> | |
| <button class="flex items-center space-x-4 p-4 border border-white rounded-lg hover:bg-white hover:bg-opacity-10 transition"> | |
| <i class="fab fa-apple text-3xl"></i> | |
| <div> | |
| <div class="text-sm">Download on the</div> | |
| <div class="font-bold">App Store</div> | |
| </div> | |
| </button> | |
| <button class="flex items-center space-x-4 p-4 border border-white rounded-lg hover:bg-white hover:bg-opacity-10 transition"> | |
| <i class="fab fa-google-play text-3xl"></i> | |
| <div> | |
| <div class="text-sm">Get it on</div> | |
| <div class="font-bold">Google Play</div> | |
| </div> | |
| </button> | |
| <button class="flex items-center space-x-4 p-4 border border-white rounded-lg hover:bg-white hover:bg-opacity-10 transition"> | |
| <i class="fas fa-vr-cardboard text-3xl"></i> | |
| <div> | |
| <div class="text-sm">VR Experience on</div> | |
| <div class="font-bold">Meta Quest</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 border-t border-white border-opacity-10"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">ROOKUS AI</h3> | |
| <p class="text-gray-400">The future of fashion in the metaverse and beyond.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Shop</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">All Collections</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">New Arrivals</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Virtual Wear</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Physical Wear</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">About</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Our Story</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sustainability</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| <p class="text-gray-400">Subscribe to our newsletter</p> | |
| <div class="flex mt-2"> | |
| <input type="email" placeholder="Your email" class="bg-transparent border-b border-white border-opacity-50 py-2 focus:outline-none focus:border-pink-500 transition flex-grow"> | |
| <button class="ml-2 px-4 bg-white text-black font-bold hover:bg-opacity-90 transition"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-white border-opacity-10 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 Rookus AI. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-sm">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Loading Animation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const progressBar = document.getElementById('progress-bar'); | |
| let width = 0; | |
| const interval = setInterval(function() { | |
| if (width >= 100) { | |
| clearInterval(interval); | |
| gsap.to('#loader', { | |
| opacity: 0, | |
| duration: 0.5, | |
| onComplete: function() { | |
| document.getElementById('loader').style.display = 'none'; | |
| init3DScene(); | |
| } | |
| }); | |
| } else { | |
| width += Math.random() * 10; | |
| if (width > 100) width = 100; | |
| progressBar.style.width = width + '%'; | |
| } | |
| }, 200); | |
| // Mobile Menu Toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| if (menu.classList.contains('hidden')) { | |
| menu.classList.remove('hidden'); | |
| } else { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| // Smooth Scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // 3D Scene Initialization | |
| function init3DScene() { | |
| // Main Background Scene | |
| const container = document.getElementById('canvas-container'); | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| container.appendChild(renderer.domElement); | |
| // Add lights | |
| const ambientLight = new THREE.AmbientLight(0x404040); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 1); | |
| directionalLight.position.set(1, 1, 1); | |
| scene.add(directionalLight); | |
| // Add floating objects | |
| const geometry = new THREE.SphereGeometry(1, 32, 32); | |
| const material = new THREE.MeshPhongMaterial({ | |
| color: 0x00ff00, | |
| transparent: true, | |
| opacity: 0.5, | |
| wireframe: true | |
| }); | |
| const objects = []; | |
| for (let i = 0; i < 20; i++) { | |
| const mesh = new THREE.Mesh(geometry, material); | |
| mesh.position.x = (Math.random() - 0.5) * 20; | |
| mesh.position.y = (Math.random() - 0.5) * 20; | |
| mesh.position.z = (Math.random() - 0.5) * 20; | |
| mesh.scale.setScalar(Math.random() * 0.5 + 0.1); | |
| scene.add(mesh); | |
| objects.push(mesh); | |
| } | |
| // Camera position | |
| camera.position.z = 5; | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Rotate objects | |
| objects.forEach(obj => { | |
| obj.rotation.x += 0.01; | |
| obj.rotation.y += 0.01; | |
| }); | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resize | |
| window.addEventListener('resize', function() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| // Initialize product viewers | |
| initProductViewers(); | |
| } | |
| // Initialize product 3D viewers | |
| function initProductViewers() { | |
| // Showroom Viewer | |
| const showroomViewer = new THREE.Scene(); | |
| const showroomCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); | |
| const showroomRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| showroomRenderer.setSize(document.getElementById('showroom-viewer').offsetWidth, document.getElementById('showroom-viewer').offsetHeight); | |
| document.getElementById('showroom-viewer').appendChild(showroomRenderer.domElement); | |
| // Add lights | |
| const showroomLight = new THREE.AmbientLight(0xffffff, 0.5); | |
| showroomViewer.add(showroomLight); | |
| const showroomDirLight = new THREE.DirectionalLight(0xffffff, 1); | |
| showroomDirLight.position.set(1, 1, 1); | |
| showroomViewer.add(showroomDirLight); | |
| // Add a simple dress model (placeholder) | |
| const dressGeometry = new THREE.ConeGeometry(1, 2, 8); | |
| const dressMaterial = new THREE.MeshPhongMaterial({ | |
| color: 0xff00ff, | |
| wireframe: true | |
| }); | |
| const dress = new THREE.Mesh(dressGeometry, dressMaterial); | |
| showroomViewer.add(dress); | |
| showroomCamera.position.z = 3; | |
| // Rotation controls | |
| let rotateDirection = 0; | |
| document.getElementById('rotate-left').addEventListener('click', () => rotateDirection = 1); | |
| document.getElementById('rotate-right').addEventListener('click', () => rotateDirection = -1); | |
| function animateShowroom() { | |
| requestAnimationFrame(animateShowroom); | |
| dress.rotation.y += 0.01 * rotateDirection; | |
| showroomRenderer.render(showroomViewer, showroomCamera); | |
| } | |
| animateShowroom(); | |
| // Collection Viewers (simplified) | |
| const initCollectionViewer = (id, color) => { | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| renderer.setSize(document.getElementById(id).offsetWidth, document.getElementById(id).offsetHeight); | |
| document.getElementById(id).appendChild(renderer.domElement); | |
| // Add lights | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); | |
| scene.add(ambientLight); | |
| const dirLight = new THREE.DirectionalLight(0xffffff, 1); | |
| dirLight.position.set(1, 1, 1); | |
| scene.add(dirLight); | |
| // Add a simple clothing item | |
| const geometry = new THREE.TorusGeometry(0.5, 0.2, 16, 32); | |
| const material = new THREE.MeshPhongMaterial({ | |
| color: color, | |
| wireframe: true | |
| }); | |
| const item = new THREE.Mesh(geometry, material); | |
| scene.add(item); | |
| camera.position.z = 2; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| item.rotation.x += 0.01; | |
| item.rotation.y += 0.01; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| }; | |
| initCollectionViewer('collection-1-viewer', 0x00ffff); | |
| initCollectionViewer('collection-2-viewer', 0xff00ff); | |
| initCollectionViewer('collection-3-viewer', 0xffff00); | |
| // About Viewer | |
| const aboutScene = new THREE.Scene(); | |
| const aboutCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); | |
| const aboutRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| aboutRenderer.setSize(document.getElementById('about-viewer').offsetWidth, document.getElementById('about-viewer').offsetHeight); | |
| document.getElementById('about-viewer').appendChild(aboutRenderer.domElement); | |
| // Add lights | |
| const aboutLight = new THREE.AmbientLight(0xffffff, 0.5); | |
| aboutScene.add(aboutLight); | |
| const aboutDirLight = new THREE.DirectionalLight(0xffffff, 1); | |
| aboutDirLight.position.set(1, 1, 1); | |
| aboutScene.add(aboutDirLight); | |
| // Add a futuristic shape | |
| const aboutGeometry = new THREE.IcosahedronGeometry(1, 1); | |
| const aboutMaterial = new THREE.MeshPhongMaterial({ | |
| color: 0xffffff, | |
| wireframe: true, | |
| transparent: true, | |
| opacity: 0.8 | |
| }); | |
| const aboutShape = new THREE.Mesh(aboutGeometry, aboutMaterial); | |
| aboutScene.add(aboutShape); | |
| aboutCamera.position.z = 3; | |
| function animateAbout() { | |
| requestAnimationFrame(animateAbout); | |
| aboutShape.rotation.x += 0.005; | |
| aboutShape.rotation.y += 0.005; | |
| aboutRenderer.render(aboutScene, aboutCamera); | |
| } | |
| animateAbout(); | |
| } | |
| </script> | |
| </body> | |
| </html> |