Spaces:

LukasBe
/

3d-rocket-launcher

Running

App Files Files Community

LukasBe commited on May 5, 2025

Commit

3dbce06

verified ·

1 Parent(s): 8298c85

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +475 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: 3d Rocket Launcher
-emoji: 📈
-colorFrom: blue
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: 3d-rocket-launcher
+emoji: 🐳
+colorFrom: green
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,475 @@
-<!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>3D Rocket Launcher</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/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>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Arial', sans-serif;
+        }
+        #canvas-container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        #ui {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 100;
+            color: white;
+            text-shadow: 1px 1px 2px black;
+        }
+        #flag {
+            position: absolute;
+            width: 40px;
+            height: 60px;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/></svg>');
+            background-size: contain;
+            background-repeat: no-repeat;
+            cursor: move;
+            z-index: 50;
+            user-select: none;
+        }
+        #launch-btn {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 12px 24px;
+            background: linear-gradient(to right, #ff5e62, #ff9966);
+            color: white;
+            border: none;
+            border-radius: 30px;
+            font-size: 18px;
+            font-weight: bold;
+            cursor: pointer;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            z-index: 100;
+            transition: all 0.3s;
+        }
+        #launch-btn:hover {
+            transform: translateX(-50%) scale(1.05);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        }
+        #launch-btn:active {
+            transform: translateX(-50%) scale(0.98);
+        }
+        .explosion-particle {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="canvas-container"></div>
+    <div id="ui">
+        <h1 class="text-3xl font-bold">🚀 Rocket Launcher</h1>
+        <p class="text-lg">Drag the flag to set target, then launch!</p>
+    </div>
+    <div id="flag"></div>
+    <button id="launch-btn">LAUNCH ROCKET</button>
+    <script>
+        // Scene setup
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x87CEEB);
+        scene.fog = new THREE.FogExp2(0x87CEEB, 0.002);
+        // Camera
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(0, 10, 30);
+        // Renderer
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        document.getElementById('canvas-container').appendChild(renderer.domElement);
+        // Controls
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        controls.minDistance = 10;
+        controls.maxDistance = 100;
+        // Lights
+        const ambientLight = new THREE.AmbientLight(0x404040);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(10, 20, 10);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        scene.add(directionalLight);
+        // Ground
+        const groundGeometry = new THREE.PlaneGeometry(200, 200);
+        const groundMaterial = new THREE.MeshStandardMaterial({
+            color: 0x3a5f0b,
+            roughness: 0.8,
+            metalness: 0.2
+        });
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
+        scene.add(ground);
+        // Launch pad
+        const padGeometry = new THREE.CylinderGeometry(3, 3, 0.5, 32);
+        const padMaterial = new THREE.MeshStandardMaterial({
+            color: 0x555555,
+            roughness: 0.7,
+            metalness: 0.3
+        });
+        const launchPad = new THREE.Mesh(padGeometry, padMaterial);
+        launchPad.position.set(0, 0.25, 0);
+        launchPad.receiveShadow = true;
+        scene.add(launchPad);
+        // Rocket
+        let rocket;
+        function createRocket() {
+            const group = new THREE.Group();
+            // Rocket body
+            const bodyGeometry = new THREE.CylinderGeometry(0.5, 0.3, 3, 32);
+            const bodyMaterial = new THREE.MeshStandardMaterial({
+                color: 0xffffff,
+                roughness: 0.2,
+                metalness: 0.7
+            });
+            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+            body.position.y = 1.5;
+            body.castShadow = true;
+            group.add(body);
+            // Rocket nose
+            const noseGeometry = new THREE.ConeGeometry(0.5, 1, 32);
+            const noseMaterial = new THREE.MeshStandardMaterial({
+                color: 0xff0000,
+                roughness: 0.2,
+                metalness: 0.7
+            });
+            const nose = new THREE.Mesh(noseGeometry, noseMaterial);
+            nose.position.y = 3.5;
+            nose.castShadow = true;
+            group.add(nose);
+            // Fins
+            const finGeometry = new THREE.BoxGeometry(0.8, 0.1, 0.5);
+            const finMaterial = new THREE.MeshStandardMaterial({
+                color: 0x0000ff,
+                roughness: 0.5,
+                metalness: 0.3
+            });
+            for (let i = 0; i < 3; i++) {
+                const fin = new THREE.Mesh(finGeometry, finMaterial);
+                fin.position.y = 0.5;
+                fin.rotation.y = (i * Math.PI * 2) / 3;
+                fin.position.x = Math.sin(fin.rotation.y) * 0.6;
+                fin.position.z = Math.cos(fin.rotation.y) * 0.6;
+                fin.rotation.z = Math.PI / 4;
+                fin.castShadow = true;
+                group.add(fin);
+            }
+            // Engine
+            const engineGeometry = new THREE.CylinderGeometry(0.4, 0.5, 0.5, 32);
+            const engineMaterial = new THREE.MeshStandardMaterial({
+                color: 0x333333,
+                roughness: 0.8,
+                metalness: 0.1
+            });
+            const engine = new THREE.Mesh(engineGeometry, engineMaterial);
+            engine.position.y = 0.25;
+            engine.castShadow = true;
+            group.add(engine);
+            // Flame (will be animated)
+            const flameGeometry = new THREE.ConeGeometry(0.6, 1.5, 32);
+            const flameMaterial = new THREE.MeshStandardMaterial({
+                color: 0xff6600,
+                emissive: 0xff6600,
+                emissiveIntensity: 1,
+                transparent: true,
+                opacity: 0.8
+            });
+            const flame = new THREE.Mesh(flameGeometry, flameMaterial);
+            flame.position.y = -0.5;
+            flame.rotation.x = Math.PI;
+            group.add(flame);
+            group.userData.flame = flame;
+            group.position.set(0, 0, 0);
+            group.scale.set(0.8, 0.8, 0.8);
+            return group;
+        }
+        // Flag dragging
+        const flag = document.getElementById('flag');
+        let isDragging = false;
+        let offsetX, offsetY;
+        flag.addEventListener('mousedown', (e) => {
+            isDragging = true;
+            offsetX = e.clientX - flag.offsetLeft;
+            offsetY = e.clientY - flag.offsetTop;
+            flag.style.opacity = '0.8';
+        });
+        document.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            flag.style.left = (e.clientX - offsetX) + 'px';
+            flag.style.top = (e.clientY - offsetY) + 'px';
+        });
+        document.addEventListener('mouseup', () => {
+            isDragging = false;
+            flag.style.opacity = '1';
+        });
+        // Convert screen position to 3D world position
+        function screenToWorld(x, y) {
+            const vector = new THREE.Vector3(
+                (x / window.innerWidth) * 2 - 1,
+                -(y / window.innerHeight) * 2 + 1,
+                0.5
+            );
+            vector.unproject(camera);
+            const dir = vector.sub(camera.position).normalize();
+            const distance = -camera.position.y / dir.y;
+            const pos = camera.position.clone().add(dir.multiplyScalar(distance));
+            return pos;
+        }
+        // Launch rocket
+        const launchBtn = document.getElementById('launch-btn');
+        let isRocketFlying = false;
+        let rocketTarget = new THREE.Vector3(10, 0, 10);
+        let rocketStartTime = 0;
+        const flightDuration = 5000; // ms
+        launchBtn.addEventListener('click', () => {
+            if (isRocketFlying) return;
+            // Get flag position in 3D world
+            const flagRect = flag.getBoundingClientRect();
+            const flagCenterX = flagRect.left + flagRect.width / 2;
+            const flagCenterY = flagRect.top + flagRect.height / 2;
+            rocketTarget = screenToWorld(flagCenterX, flagCenterY);
+            // Create rocket
+            if (rocket) scene.remove(rocket);
+            rocket = createRocket();
+            scene.add(rocket);
+            isRocketFlying = true;
+            rocketStartTime = Date.now();
+            // Animate flame
+            animateFlame();
+        });
+        // Animate rocket flame
+        function animateFlame() {
+            if (!isRocketFlying || !rocket) return;
+            const flame = rocket.userData.flame;
+            if (flame) {
+                // Randomize flame size for flickering effect
+                const scale = 0.8 + Math.random() * 0.4;
+                flame.scale.set(scale, scale, scale);
+            }
+            requestAnimationFrame(animateFlame);
+        }
+        // Create explosion
+        function createExplosion(position) {
+            // Create particles
+            const particleCount = 200;
+            const particles = new THREE.BufferGeometry();
+            const positions = new Float32Array(particleCount * 3);
+            const colors = new Float32Array(particleCount * 3);
+            const sizes = new Float32Array(particleCount);
+            const colorChoices = [
+                new THREE.Color(0xff6600), // Orange
+                new THREE.Color(0xff0000), // Red
+                new THREE.Color(0xffff00), // Yellow
+                new THREE.Color(0xffffff)  // White
+            ];
+            for (let i = 0; i < particleCount; i++) {
+                // Random position in sphere
+                const theta = Math.random() * Math.PI * 2;
+                const phi = Math.random() * Math.PI;
+                const radius = 0.1 + Math.random() * 2;
+                positions[i * 3] = position.x + radius * Math.sin(phi) * Math.cos(theta);
+                positions[i * 3 + 1] = position.y + radius * Math.cos(phi);
+                positions[i * 3 + 2] = position.z + radius * Math.sin(phi) * Math.sin(theta);
+                // Random color
+                const color = colorChoices[Math.floor(Math.random() * colorChoices.length)];
+                colors[i * 3] = color.r;
+                colors[i * 3 + 1] = color.g;
+                colors[i * 3 + 2] = color.b;
+                // Random size
+                sizes[i] = 0.5 + Math.random() * 1.5;
+            }
+            particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            particles.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+            // Particle material
+            const particleMaterial = new THREE.PointsMaterial({
+                size: 1,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.AdditiveBlending
+            });
+            const particleSystem = new THREE.Points(particles, particleMaterial);
+            scene.add(particleSystem);
+            // Animate particles
+            const startTime = Date.now();
+            const duration = 2000; // 2 seconds
+            function animateParticles() {
+                const elapsed = Date.now() - startTime;
+                const progress = elapsed / duration;
+                if (progress >= 1) {
+                    scene.remove(particleSystem);
+                    return;
+                }
+                // Update particle positions (fly outward and fade)
+                const positions = particles.attributes.position.array;
+                for (let i = 0; i < particleCount; i++) {
+                    // Move particles outward
+                    positions[i * 3] += (positions[i * 3] - position.x) * 0.02;
+                    positions[i * 3 + 1] += (positions[i * 3 + 1] - position.y) * 0.02;
+                    positions[i * 3 + 2] += (positions[i * 3 + 2] - position.z) * 0.02;
+                    // Add some randomness
+                    positions[i * 3] += (Math.random() - 0.5) * 0.2;
+                    positions[i * 3 + 1] += (Math.random() - 0.5) * 0.2;
+                    positions[i * 3 + 2] += (Math.random() - 0.5) * 0.2;
+                }
+                particles.attributes.position.needsUpdate = true;
+                particleMaterial.opacity = 1 - progress;
+                requestAnimationFrame(animateParticles);
+            }
+            animateParticles();
+        }
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Update controls
+            controls.update();
+            // Update rocket flight
+            if (isRocketFlying && rocket) {
+                const elapsed = Date.now() - rocketStartTime;
+                const progress = Math.min(elapsed / flightDuration, 1);
+                if (progress >= 1) {
+                    // Rocket reached target - explode!
+                    createExplosion(rocket.position);
+                    scene.remove(rocket);
+                    isRocketFlying = false;
+                    rocket = null;
+                } else {
+                    // Calculate bezier curve path
+                    const startPoint = new THREE.Vector3(0, 0, 0);
+                    const controlPoint1 = new THREE.Vector3(
+                        rocketTarget.x * 0.3,
+                        rocketTarget.y + 30,
+                        rocketTarget.z * 0.3
+                    );
+                    const controlPoint2 = new THREE.Vector3(
+                        rocketTarget.x * 0.7,
+                        rocketTarget.y + 20,
+                        rocketTarget.z * 0.7
+                    );
+                    const endPoint = new THREE.Vector3(rocketTarget.x, rocketTarget.y, rocketTarget.z);
+                    // Get position on curve
+                    const t = progress;
+                    const u = 1 - t;
+                    const tt = t * t;
+                    const uu = u * u;
+                    const uuu = uu * u;
+                    const ttt = tt * t;
+                    const point = new THREE.Vector3(0, 0, 0);
+                    point.x = uuu * startPoint.x;
+                    point.y = uuu * startPoint.y;
+                    point.z = uuu * startPoint.z;
+                    point.x += 3 * uu * t * controlPoint1.x;
+                    point.y += 3 * uu * t * controlPoint1.y;
+                    point.z += 3 * uu * t * controlPoint1.z;
+                    point.x += 3 * u * tt * controlPoint2.x;
+                    point.y += 3 * u * tt * controlPoint2.y;
+                    point.z += 3 * u * tt * controlPoint2.z;
+                    point.x += ttt * endPoint.x;
+                    point.y += ttt * endPoint.y;
+                    point.z += ttt * endPoint.z;
+                    // Set rocket position and rotation
+                    rocket.position.copy(point);
+                    // Calculate direction for rotation
+                    if (elapsed > 50) { // Wait a frame to have previous position
+                        const direction = point.clone().sub(rocket.userData.lastPosition).normalize();
+                        rocket.lookAt(point.clone().add(direction));
+                        rocket.rotateX(Math.PI / 2); // Adjust because rocket model points up
+                    }
+                    rocket.userData.lastPosition = point.clone();
+                }
+            }
+            renderer.render(scene, camera);
+        }
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // Start animation
+        animate();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/3d-rocket-launcher" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Create and amazing 3d threejs based rocket laucning toy, the user can drag a flag over the screen, then then launch great looking 3d procedural detailed rocket that flies in indirect interesting bezier path slowly to the flag where it exploded in a beaturiful particle based smoke,fire and sparks ...