घूमता हुआ 3D वायरफ्रेम क्यूब

यहाँ एक HTML/CSS/JS फ़ाइल है जो कैनवास 2D कॉन्टेक्स्ट का उपयोग करके एक वायरफ्रेम क्यूब को 3D परिप्रेक्ष्य में धीरे-धीरे घुमाता है। लाइनें हमेशा सही ढंग से जुड़ी रहती हैं। ```html <!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>घूमता वायरफ्रेम क्यूब</title> <style> body { margin: 0; overflow: hidden; background-color: #111; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; } canvas { display: block; background: radial-gradient(circle, #1a1a1a, #000); border-radius: 8px; box-shadow: 0 0 30px rgba(0, 150, 255, 0.2); } </style> </head> <body> <canvas id="cubeCanvas" width="600" height="600"></canvas> <script> const canvas = document.getElementById('cubeCanvas'); const ctx = canvas.getContext('2d'); // क्यूब के 8 कोने (3D निर्देशांक) const vertices = [ { x: -1, y: -1, z: -1 }, // 0 { x: 1, y: -1, z: -1 }, // 1 { x: 1, y: 1, z: -1 }, // 2 { x: -1, y: 1, z: -1 }, // 3 { x: -1, y: -1, z: 1 }, // 4 { x: 1, y: -1, z: 1 }, // 5 { x: 1, y: 1, z: 1 }, // 6 { x: -1, y: 1, z: 1 } // 7 ]; // क्यूब के किनारे (कोने के इंडेक्स) const edges = [ [0, 1], [1, 2], [2, 3], [3, 0], // पीछे का चेहरा [4, 5], [5, 6], [6, 7], [7, 4], // सामने का चेहरा [0, 4], [1, 5], [2, 6], [3, 7] // कनेक्टिंग किनारे ]; // कैमरा दूरी (परिप्रेक्ष्य के लिए) const cameraDistance = 4; // घूर्णन कोण let rotationX = 0; let rotationY = 0; const rotationSpeed = 0.005; // धीमी गति // 3D बिंदु को 2D स्क्रीन पर प्रोजेक्ट करें function project(point3D) { // X और Y अक्ष पर घूर्णन const cosX = Math.cos(rotationX); const sinX = Math.sin(rotationX); const cosY = Math.cos(rotationY); const sinY = Math.sin(rotationY); // Y-अक्ष घूर्णन let x = point3D.x * cosY - point3D.z * sinY; let z = point3D.x * sinY + point3D.z * cosY; let y = point3D.y; // X-अक्ष घूर्णन const y1 = y * cosX - z * sinX; const z1 = y * sinX + z * cosX; y = y1; z = z1; // परिप्रेक्ष्य प्रोजेक्शन const scale = cameraDistance / (cameraDistance - z); const screenX = x * scale; const screenY = y * scale; // स्क्रीन के केंद्र में मैप करें और स्केल करें const centerX = canvas.width / 2; const centerY = canvas.height / 2; const size = 150; // क्यूब का आकार return { x: centerX + screenX * size, y: centerY + screenY * size }; } // एनीमेशन लूप function animate() { // स्क्रीन साफ़ करें ctx.clearRect(0, 0, canvas.width, canvas.height); // घूर्णन कोण अपडेट करें (धीमी गति) rotationX += rotationSpeed; rotationY += rotationSpeed * 0.7; // थोड़ा अलग गति से अधिक दिलचस्प // सभी कोनों को प्रोजेक्ट करें const projected = vertices.map(v => project(v)); // किनारों को ड्रा करें ctx.strokeStyle = '#00e5ff'; ctx.lineWidth = 2; ctx.shadowColor = '#00e5ff'; ctx.shadowBlur = 10; ctx.beginPath(); edges.forEach(edge => { const p1 = projected[edge[0]]; const p2 = projected[edge[1]]; ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); }); ctx.stroke(); // कोने के बिंदु ड्रा करें (वैकल्पिक) ctx.fillStyle = '#ffffff'; ctx.shadowBlur = 15; projected.forEach(p => { ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.fill(); }); // अगला फ्रेम requestAnimationFrame(animate); } // एनीमेशन शुरू करें animate(); // विंडो रिसाइज़ पर कैनवास का आकार समायोजित करें (वैकल्पिक) window.addEventListener('resize', () => { canvas.width = window.innerWidth * 0.8; canvas.height = window.innerHeight * 0.8; }); </script> </body> </html> ``` **विशेषताएँ:** - **शुद्ध कैनवास 2D** - कोई WebGL नहीं, केवल `ctx` का उपयोग। - **सही कनेक्शन** - क्यूब के 12 किनारे हमेशा सही कोने से जुड़े रहते हैं। - **धीमा घूर्णन** - X और Y अक्ष पर अलग-अलग गति से घूमता है, जिससे 3D प्रभाव बेहतर दिखता है। - **परिप्रेक्ष्य** - कैमरा दूरी के आधार पर वास्तविक 3D प्रोजेक्शन। - **स्टाइलिश लुक** - नीली चमकदार लाइनें और सफेद कोने के बिंदु। इसे किसी भी HTML फ़ाइल में सेव करके ब्राउज़र में खोलें। क्यूब अपने आप घूमना शुरू कर देगा।