Spaces:

LukasBe
/

3d-rocket-launcher

Running

App Files Files Community

LukasBe commited on May 5, 2025

Commit

19e5b53

verified ·

1 Parent(s): 3dbce06

Add 2 files

Browse files

Files changed (2) hide show

index.html +123 -29
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -69,6 +69,15 @@
             border-radius: 50%;
             pointer-events: none;
         }
     </style>
 </head>
 <body>
@@ -77,6 +86,7 @@
         <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>
@@ -138,10 +148,21 @@
         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);
@@ -218,6 +239,35 @@
             return group;
         }
         // Flag dragging
         const flag = document.getElementById('flag');
         let isDragging = false;
@@ -258,35 +308,36 @@
         // 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) {
@@ -295,7 +346,7 @@
                 flame.scale.set(scale, scale, scale);
             }
-            requestAnimationFrame(animateFlame);
         }
         // Create explosion
@@ -386,6 +437,46 @@
             animateParticles();
         }
         // Animation loop
         function animate() {
             requestAnimationFrame(animate);
@@ -393,31 +484,34 @@
             // 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;

             border-radius: 50%;
             pointer-events: none;
         }
+        #counter {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            color: white;
+            font-size: 18px;
+            text-shadow: 1px 1px 2px black;
+            z-index: 100;
+        }
     </style>
 </head>
 <body>
         <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="counter">Rockets launched: <span id="rocket-count">0</span></div>
     <div id="flag"></div>
     <button id="launch-btn">LAUNCH ROCKET</button>
         launchPad.receiveShadow = true;
         scene.add(launchPad);
+        // Active rockets and smoke trails
+        let activeRockets = [];
+        let smokeParticles = [];
+        let rocketCount = 0;
         // Rocket
         function createRocket() {
             const group = new THREE.Group();
+            group.userData = {
+                isFlying: false,
+                startTime: 0,
+                target: new THREE.Vector3(10, 0, 10),
+                lastPosition: new THREE.Vector3(0, 0, 0),
+                smokeTrail: []
+            };
             // Rocket body
             const bodyGeometry = new THREE.CylinderGeometry(0.5, 0.3, 3, 32);
             return group;
         }
+        // Create smoke particle
+        function createSmokeParticle(position) {
+            const size = 1 + Math.random() * 2;
+            const geometry = new THREE.SphereGeometry(size, 8, 8);
+            const material = new THREE.MeshStandardMaterial({
+                color: 0xeeeeee,
+                transparent: true,
+                opacity: 0.7,
+                roughness: 0.9,
+                metalness: 0
+            });
+            const particle = new THREE.Mesh(geometry, material);
+            particle.position.copy(position);
+            particle.userData = {
+                createdAt: Date.now(),
+                lifeTime: 3000 + Math.random() * 2000, // 3-5 seconds
+                velocity: new THREE.Vector3(
+                    (Math.random() - 0.5) * 0.1,
+                    Math.random() * 0.05,
+                    (Math.random() - 0.5) * 0.1
+                ),
+                growthRate: 0.02 + Math.random() * 0.03
+            };
+            scene.add(particle);
+            return particle;
+        }
         // Flag dragging
         const flag = document.getElementById('flag');
         let isDragging = false;
         // Launch rocket
         const launchBtn = document.getElementById('launch-btn');
+        const rocketCountElement = document.getElementById('rocket-count');
         launchBtn.addEventListener('click', () => {
             // Get flag position in 3D world
             const flagRect = flag.getBoundingClientRect();
             const flagCenterX = flagRect.left + flagRect.width / 2;
             const flagCenterY = flagRect.top + flagRect.height / 2;
+            const target = screenToWorld(flagCenterX, flagCenterY);
             // Create rocket
+            const rocket = createRocket();
+            rocket.userData.isFlying = true;
+            rocket.userData.startTime = Date.now();
+            rocket.userData.target = target;
+            rocket.userData.lastPosition = new THREE.Vector3(0, 0, 0);
             scene.add(rocket);
+            activeRockets.push(rocket);
+            // Update counter
+            rocketCount++;
+            rocketCountElement.textContent = rocketCount;
             // Animate flame
+            animateFlame(rocket);
         });
         // Animate rocket flame
+        function animateFlame(rocket) {
+            if (!rocket.userData.isFlying) return;
             const flame = rocket.userData.flame;
             if (flame) {
                 flame.scale.set(scale, scale, scale);
             }
+            requestAnimationFrame(() => animateFlame(rocket));
         }
         // Create explosion
             animateParticles();
         }
+        // Update smoke particles
+        function updateSmokeParticles() {
+            const now = Date.now();
+            // Update existing smoke particles
+            for (let i = smokeParticles.length - 1; i >= 0; i--) {
+                const particle = smokeParticles[i];
+                const age = now - particle.userData.createdAt;
+                if (age > particle.userData.lifeTime) {
+                    // Remove expired particles
+                    scene.remove(particle);
+                    smokeParticles.splice(i, 1);
+                } else {
+                    // Update position and size
+                    particle.position.x += particle.userData.velocity.x;
+                    particle.position.y += particle.userData.velocity.y;
+                    particle.position.z += particle.userData.velocity.z;
+                    // Grow over time
+                    const scale = 1 + (particle.userData.growthRate * age / 1000);
+                    particle.scale.set(scale, scale, scale);
+                    // Fade out
+                    particle.material.opacity = 0.7 * (1 - (age / particle.userData.lifeTime));
+                }
+            }
+            // Add new smoke particles for each rocket
+            for (const rocket of activeRockets) {
+                if (rocket.userData.isFlying && rocket.position.y > 1) {
+                    // Only add smoke when rocket is above ground
+                    if (Math.random() < 0.3) { // Control density of smoke trail
+                        const smokeParticle = createSmokeParticle(rocket.position.clone());
+                        smokeParticles.push(smokeParticle);
+                    }
+                }
+            }
+        }
         // Animation loop
         function animate() {
             requestAnimationFrame(animate);
             // Update controls
             controls.update();
+            // Update smoke particles
+            updateSmokeParticles();
+            // Update all active rockets
+            for (let i = activeRockets.length - 1; i >= 0; i--) {
+                const rocket = activeRockets[i];
+                const elapsed = Date.now() - rocket.userData.startTime;
+                const progress = Math.min(elapsed / 5000, 1); // 5 second flight duration
                 if (progress >= 1) {
                     // Rocket reached target - explode!
                     createExplosion(rocket.position);
                     scene.remove(rocket);
+                    activeRockets.splice(i, 1);
                 } else {
                     // Calculate bezier curve path
                     const startPoint = new THREE.Vector3(0, 0, 0);
                     const controlPoint1 = new THREE.Vector3(
+                        rocket.userData.target.x * 0.3,
+                        rocket.userData.target.y + 30,
+                        rocket.userData.target.z * 0.3
                     );
                     const controlPoint2 = new THREE.Vector3(
+                        rocket.userData.target.x * 0.7,
+                        rocket.userData.target.y + 20,
+                        rocket.userData.target.z * 0.7
                     );
+                    const endPoint = rocket.userData.target.clone();
                     // Get position on curve
                     const t = progress;

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
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 ...


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 ...
2	+ Allow to launch unlimited number of rockets. Make the rocket leave a white puffy smoke particle trail that slowly disappears.