Spaces:

akhaliq
/

red-hub-37

Running

App Files Files Community

akhaliq HF Staff commited on Sep 29

Commit

37e0660

verified ·

1 Parent(s): ceb8f53

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

index.html +92 -19
js/voxel-scene.js +362 -0

index.html CHANGED Viewed

@@ -1,19 +1,92 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voxel Pagoda Garden</title>
+    <meta name="description" content="An immersive voxel art scene featuring a beautiful pagoda surrounded by cherry blossoms in a serene Japanese garden">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #87CEEB 0%, #98FB98 100%);
+            font-family: 'Arial', sans-serif;
+            overflow: hidden;
+        }
+        #info {
+            position: absolute;
+            top: 10px;
+            width: 100%;
+            text-align: center;
+            color: #2c3e50;
+            z-index: 100;
+            pointer-events: none;
+        }
+        #info h1 {
+            font-size: 2.5em;
+            margin: 0;
+            text-shadow: 2px 2px 4px rgba(255,255,255,0.7);
+        }
+        #info p {
+            font-size: 1.2em;
+            margin: 10px 0;
+            text-shadow: 1px 1px 2px rgba(255,255,255,0.7);
+        }
+        #built-with {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            z-index: 100;
+        }
+        #built-with a {
+            color: #2c3e50;
+            text-decoration: none;
+            font-weight: bold;
+            background: rgba(255,255,255,0.8);
+            padding: 8px 15px;
+            border-radius: 20px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            pointer-events: all;
+        }
+        #built-with a:hover {
+            background: rgba(255,255,255,1);
+            transform: translateY(-2px);
+        }
+        #loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #2c3e50;
+            font-size: 1.5em;
+            z-index: 1000;
+        }
+        canvas {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div id="info">
+        <h1>Voxel Pagoda Garden</h1>
+        <p>A serene Japanese garden with cherry blossoms</p>
+    </div>
+    <div id="built-with">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+    </div>
+    <div id="loading">Loading beautiful voxel garden...</div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="js/voxel-scene.js"></script>
+</body>
+</html>

js/voxel-scene.js ADDED Viewed

	@@ -0,0 +1,362 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Remove loading message after 2 seconds
+    setTimeout(() => {
+        document.getElementById('loading').style.display = 'none';
+    }, 2000);
+    // Scene setup
+    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 });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0x87CEEB);
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    document.body.appendChild(renderer.domElement);
+    // Lighting
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+    scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    directionalLight.position.set(50, 100, 50);
+    directionalLight.castShadow = true;
+    directionalLight.shadow.mapSize.width = 2048;
+    directionalLight.shadow.mapSize.height = 2048;
+    scene.add(directionalLight);
+    // Create a simple voxel (cube)
+    function createVoxel(x, y, z, color, size = 1) {
+        const geometry = new THREE.BoxGeometry(size, size, size);
+        const material = new THREE.MeshLambertMaterial({ color: color });
+        const voxel = new THREE.Mesh(geometry, material);
+        voxel.position.set(x, y, z);
+        voxel.castShadow = true;
+        voxel.receiveShadow = true;
+        return voxel;
+    }
+    // Create ground
+    function createGround() {
+        const groundGeometry = new THREE.PlaneGeometry(200, 200);
+        const groundMaterial = new THREE.MeshLambertMaterial({
+            color: 0x90EE90,
+            side: THREE.DoubleSide
+        });
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.position.y = -0.5;
+        ground.receiveShadow = true;
+        scene.add(ground);
+        // Add grass texture with smaller voxels
+        for (let i = -80; i <= 80; i += 2) {
+            for (let j = -80; j <= 80; j += 2) {
+                if (Math.random() > 0.7) {
+                    const grassVoxel = createVoxel(i, 0, j, 0x7CFC00, 1);
+                    scene.add(grassVoxel);
+                }
+            }
+        }
+    }
+    // Create pagoda
+    function createPagoda() {
+        const pagodaGroup = new THREE.Group();
+        // Base platform
+        for (let x = -8; x <= 8; x++) {
+            for (let z = -8; z <= 8; z++) {
+                const voxel = createVoxel(x, 0, z, 0x8B4513);
+                pagodaGroup.add(voxel);
+            }
+        }
+        // First level
+        for (let y = 1; y <= 6; y++) {
+            for (let x = -6; x <= 6; x++) {
+                for (let z = -6; z <= 6; z++) {
+                    if (x === -6 || x === 6 || z === -6 || z === 6 || y === 1 || y === 6) {
+                        const voxel = createVoxel(x, y, z, 0xCD853F);
+                        pagodaGroup.add(voxel);
+                    }
+                }
+            }
+        }
+        // Second level (smaller)
+        for (let y = 7; y <= 10; y++) {
+            for (let x = -4; x <= 4; x++) {
+                for (let z = -4; z <= 4; z++) {
+                    if (x === -4 || x === 4 || z === -4 || z === 4 || y === 7 || y === 10) {
+                        const voxel = createVoxel(x, y, z, 0xD2691E);
+                        pagodaGroup.add(voxel);
+                    }
+                }
+            }
+        }
+        // Third level (even smaller)
+        for (let y = 11; y <= 13; y++) {
+            for (let x = -2; x <= 2; x++) {
+                for (let z = -2; z <= 2; z++) {
+                    if (x === -2 || x === 2 || z === -2 || z === 2 || y === 11 || y === 13) {
+                        const voxel = createVoxel(x, y, z, 0xA0522D);
+                        pagodaGroup.add(voxel);
+                    }
+                }
+            }
+        }
+        // Roof decorations
+        for (let y = 14; y <= 16; y++) {
+            for (let x = -1; x <= 1; x++) {
+                for (let z = -1; z <= 1; z++) {
+                    if ((x === -1 || x === 1 || z === -1 || z === 1) && y === 14) {
+                        const voxel = createVoxel(x, y, z, 0xFF0000);
+                        pagodaGroup.add(voxel);
+                    }
+                }
+            }
+        }
+        // Spire
+        for (let y = 15; y <= 20; y++) {
+            const voxel = createVoxel(0, y, 0, 0xFFD700);
+            pagodaGroup.add(voxel);
+        }
+        // Entrance
+        for (let x = -2; x <= 2; x++) {
+            for (let z = 7; z <= 8; z++) {
+                if (!(x >= -1 && x <= 1 && z === 7)) {
+                    const voxel = createVoxel(x, 1, z, 0x8B4513);
+                    pagodaGroup.add(voxel);
+                }
+            }
+        }
+        pagodaGroup.position.set(0, 0, 0);
+        scene.add(pagodaGroup);
+    }
+    // Create cherry blossom trees
+    function createCherryBlossomTree(x, z) {
+        const treeGroup = new THREE.Group();
+        // Trunk
+        for (let y = 0; y < 8; y++) {
+            const voxel = createVoxel(0, y, 0, 0x8B4513);
+            treeGroup.add(voxel);
+        }
+        // Leaves and blossoms
+        for (let y = 6; y <= 12; y++) {
+            for (let dx = -3; dx <= 3; dx++) {
+                for (let dz = -3; dz <= 3; dz++) {
+                    const distance = Math.sqrt(dx * dx + dz * dz);
+                    if (distance <= 3 && Math.random() > 0.3) {
+                        let color;
+                        if (Math.random() > 0.7) {
+                            // Cherry blossoms
+                            color = Math.random() > 0.5 ? 0xFFB6C1 : 0xFF69B4;
+                        } else {
+                            // Leaves
+                            color = Math.random() > 0.5 ? 0x90EE90 : 0x32CD32;
+                        }
+                        const voxel = createVoxel(dx, y, dz, color);
+                        treeGroup.add(voxel);
+                    }
+                }
+            }
+        }
+        treeGroup.position.set(x, 0, z);
+        scene.add(treeGroup);
+        return treeGroup;
+    }
+    // Create garden elements
+    function createGarden() {
+        // Pond
+        const pondGeometry = new THREE.CircleGeometry(10, 32);
+        const pondMaterial = new THREE.MeshLambertMaterial({
+            color: 0x4682B4,
+            transparent: true,
+            opacity: 0.8
+        });
+        const pond = new THREE.Mesh(pondGeometry, pondMaterial);
+        pond.rotation.x = -Math.PI / 2;
+        pond.position.set(25, 0.1, 25);
+        scene.add(pond);
+        // Bridge over pond
+        for (let x = -3; x <= 3; x++) {
+            for (let z = 20; z <= 30; z++) {
+                if (Math.abs(x) <= 2) {
+                    const voxel = createVoxel(x, 1, z, 0x8B4513);
+                    scene.add(voxel);
+                }
+            }
+        }
+        // Stone path
+        for (let i = -40; i <= 40; i += 2) {
+            if (Math.random() > 0.3) {
+                const voxel = createVoxel(i, 0.5, 0, 0x808080);
+                scene.add(voxel);
+            }
+        }
+        // Lanterns along path
+        for (let x = -35; x <= 35; x += 15) {
+            createLantern(x, 2, 3);
+        }
+    }
+    // Create traditional lantern
+    function createLantern(x, y, z) {
+        const lanternGroup = new THREE.Group();
+        // Base
+        for (let dy = 0; dy < 2; dy++) {
+            const voxel = createVoxel(0, dy, 0, 0x696969);
+            lanternGroup.add(voxel);
+        }
+        // Light section
+        for (let dx = -1; dx <= 1; dx++) {
+            for (let dz = -1; dz <= 1; dz++) {
+                if (dx === 0 || dz === 0) {
+                    const voxel = createVoxel(dx, 2, dz, 0xFFD700);
+                }
+            }
+        }
+        // Top
+        const topVoxel = createVoxel(0, 3, 0, 0x8B4513);
+        lanternGroup.add(topVoxel);
+        lanternGroup.position.set(x, y, z);
+        scene.add(lanternGroup);
+    }
+    // Create falling cherry blossoms
+    function createFallingBlossoms() {
+        const blossomGroup = new THREE.Group();
+        const blossomCount = 50;
+        for (let i = 0; i < blossomCount; i++) {
+            const geometry = new THREE.SphereGeometry(0.3, 4, 4);
+            const material = new THREE.MeshLambertMaterial({
+                color: Math.random() > 0.5 ? 0xFFB6C1 : 0xFF69B4
+            });
+            const blossom = new THREE.Mesh(geometry, material);
+            blossom.position.set(
+                Math.random() * 60 - 30,
+                Math.random() * 20 + 10,
+                Math.random() * 60 - 30
+            );
+            blossom.userData = {
+                velocity: Math.random() * 0.02 + 0.01,
+                rotationSpeed: (Math.random() - 0.5) * 0.02
+            };
+            blossomGroup.add(blossom);
+        }
+        scene.add(blossomGroup);
+        return blossomGroup;
+    }
+    // Initialize scene
+    createGround();
+    createPagoda();
+    createGarden();
+    // Create multiple cherry blossom trees
+    const treePositions = [
+        [-20, -20], [20, -20], [-20, 20], [20, 20],
+        [30, 0], [-30, 0], [0, 30], [0, -30],
+        [15, -25], [-15, 25], [25, 15], [-25, -15]
+    ];
+    treePositions.forEach(pos => {
+        createCherryBlossomTree(pos[0], pos[1]);
+    });
+    const fallingBlossoms = createFallingBlossoms();
+    // Camera position
+    camera.position.set(40, 25, 40);
+    camera.lookAt(0, 10, 0);
+    // Animation
+    function animate() {
+        requestAnimationFrame(animate);
+        // Animate falling blossoms
+        fallingBlossoms.children.forEach(blossom => {
+            blossom.position.y -= blossom.userData.velocity;
+            blossom.rotation.x += blossom.userData.rotationSpeed;
+            blossom.rotation.z += blossom.userData.rotationSpeed;
+            // Reset blossom position when it falls below ground
+            if (blossom.position.y < 0) {
+                blossom.position.y = 20;
+                blossom.position.x = Math.random() * 60 - 30;
+                blossom.position.z = Math.random() * 60 - 30;
+            }
+        });
+        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);
+    });
+    // Add mouse controls for camera rotation
+    let mouseDown = false;
+    let mouseX = 0;
+    let mouseY = 0;
+    document.addEventListener('mousedown', function(e) {
+        mouseDown = true;
+        mouseX = e.clientX;
+        mouseY = e.clientY;
+    });
+    document.addEventListener('mouseup', function() {
+        mouseDown = false;
+    });
+    document.addEventListener('mousemove', function(e) {
+        if (!mouseDown) return;
+        const deltaX = e.clientX - mouseX;
+        const deltaY = e.clientY - mouseY;
+        camera.position.x -= deltaX * 0.01;
+        camera.position.y += deltaY * 0.01;
+        camera.lookAt(0, 10, 0);
+        mouseX = e.clientX;
+        mouseY = e.clientY;
+    });
+    // Add zoom with mouse wheel
+    document.addEventListener('wheel', function(e) {
+        camera.position.multiplyScalar(1 + e.deltaY * 0.001);
+        camera.lookAt(0, 10, 0);
+    });
+});