Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Spinny Tech Cube 3D</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/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| .info { | |
| position: absolute; | |
| bottom: 20px; | |
| width: 100%; | |
| text-align: center; | |
| z-index: 100; | |
| color: white; | |
| font-family: 'Arial', sans-serif; | |
| pointer-events: none; | |
| text-shadow: 0 0 5px rgba(0,0,0,0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900"> | |
| <div id="canvas-container" class="w-full h-screen"></div> | |
| <div class="info"> | |
| <h1 class="text-4xl font-bold mb-2">Engineering House</h1> | |
| <p class="text-xl opacity-80">A rotating architectural structure</p> | |
| </div> | |
| <script> | |
| // Three.js scene setup | |
| 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); | |
| // Create an engineering house-like structure | |
| const baseGeo = new THREE.BoxGeometry(3, 0.5, 3); | |
| const baseMat = new THREE.MeshBasicMaterial({ color: 0x333333 }); | |
| const base = new THREE.Mesh(baseGeo, baseMat); | |
| scene.add(base); | |
| // Main house structure | |
| const houseGeo = new THREE.BoxGeometry(2, 1.5, 2); | |
| const houseMat = new THREE.MeshBasicMaterial({ | |
| color: 0x444444, | |
| wireframe: true, | |
| transparent: true, | |
| opacity: 0.8 | |
| }); | |
| const house = new THREE.Mesh(houseGeo, houseMat); | |
| house.position.y = 1.25; | |
| scene.add(house); | |
| // Roof (pyramid shape) | |
| const roofGeo = new THREE.ConeGeometry(1.8, 1, 4); | |
| const roofMat = new THREE.MeshBasicMaterial({ | |
| color: 0x555555, | |
| wireframe: true | |
| }); | |
| const roof = new THREE.Mesh(roofGeo, roofMat); | |
| roof.position.y = 2.5; | |
| roof.rotation.y = Math.PI / 4; | |
| scene.add(roof); | |
| // Add edges for better visibility | |
| const houseEdges = new THREE.EdgesGeometry(houseGeo); | |
| const houseLine = new THREE.LineSegments( | |
| houseEdges, | |
| new THREE.LineBasicMaterial({ color: 0x00ffff, linewidth: 2 }) | |
| ); | |
| houseLine.position.y = 1.25; | |
| scene.add(houseLine); | |
| const roofEdges = new THREE.EdgesGeometry(roofGeo); | |
| const roofLine = new THREE.LineSegments( | |
| roofEdges, | |
| new THREE.LineBasicMaterial({ color: 0xff00ff, linewidth: 2 }) | |
| ); | |
| roofLine.position.y = 2.5; | |
| roofLine.rotation.y = Math.PI / 4; | |
| scene.add(roofLine); | |
| // Add some orbiting spheres | |
| const spheres = []; | |
| const sphereGeo = new THREE.SphereGeometry(0.1, 16, 16); | |
| const sphereMat = new THREE.MeshBasicMaterial({ color: 0xff00ff }); | |
| for (let i = 0; i < 8; i++) { | |
| const sphere = new THREE.Mesh(sphereGeo, sphereMat); | |
| sphere.position.x = 3 * Math.sin(i * Math.PI / 4); | |
| sphere.position.z = 3 * Math.cos(i * Math.PI / 4); | |
| scene.add(sphere); | |
| spheres.push(sphere); | |
| } | |
| camera.position.z = 5; | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| house.rotation.y += 0.01; | |
| houseLine.rotation.y = house.rotation.y; | |
| roof.rotation.y = house.rotation.y; | |
| roofLine.rotation.y = house.rotation.y; | |
| spheres.forEach((sphere, i) => { | |
| sphere.position.x = 3 * Math.sin(Date.now() * 0.001 + i * Math.PI / 4); | |
| sphere.position.z = 3 * Math.cos(Date.now() * 0.001 + i * Math.PI / 4); | |
| }); | |
| renderer.render(scene, camera); | |
| } | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| animate(); | |
| </script> | |
| </body> | |
| </html> | |