Add 2 files

index.html

@@ -132,69 +132,104 @@
         // Rocket materials
         const rocketBodyMaterial = new THREE.MeshPhongMaterial({ 
             color: 0xff3333,
-            shininess: 100 
+            shininess: 100,
+            specular: 0x111111
         });
         
         const rocketNoseMaterial = new THREE.MeshPhongMaterial({ 
             color: 0xffffff,
-            shininess: 100 
+            shininess: 100,
+            specular: 0x111111
         });
         
         const rocketFinMaterial = new THREE.MeshPhongMaterial({ 
             color: 0x3333ff,
-            shininess: 50 
+            shininess: 50,
+            specular: 0x111111
         });
         
         // Create a procedural rocket model
         function createRocket() {
             const rocketGroup = new THREE.Group();
             
-            // Rocket body (cylinder)
-            const bodyGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1, 32);
+            // Rocket body (cylinder with more segments for better quality)
+            const bodyGeometry = new THREE.CylinderGeometry(0.15, 0.15, 1, 32, 32, false);
             const body = new THREE.Mesh(bodyGeometry, rocketBodyMaterial);
             body.position.y = 0.5;
+            body.castShadow = true;
             rocketGroup.add(body);
             
-            // Rocket nose (cone)
-            const noseGeometry = new THREE.ConeGeometry(0.2, 0.4, 32);
+            // Rocket nose (cone with more segments)
+            const noseGeometry = new THREE.ConeGeometry(0.15, 0.3, 32, 1, true);
             const nose = new THREE.Mesh(noseGeometry, rocketNoseMaterial);
-            nose.position.y = 1.2;
+            nose.position.y = 1.15;
+            nose.castShadow = true;
             rocketGroup.add(nose);
             
-            // Rocket fins (3 fins)
-            const finGeometry = new THREE.BoxGeometry(0.4, 0.1, 0.2);
-            for (let i = 0; i < 3; i++) {
+            // Rocket fins (4 fins for better stability)
+            const finGeometry = new THREE.BoxGeometry(0.3, 0.05, 0.15);
+            for (let i = 0; i < 4; i++) {
                 const fin = new THREE.Mesh(finGeometry, rocketFinMaterial);
-                fin.position.y = 0.2;
-                fin.position.z = 0.1;
+                fin.position.y = 0.25;
+                fin.position.z = 0.075;
                 fin.rotation.x = Math.PI / 2;
-                fin.rotation.y = (i * Math.PI * 2 / 3);
-                fin.position.x = Math.sin(fin.rotation.y) * 0.3;
-                fin.position.z = Math.cos(fin.rotation.y) * 0.3;
+                fin.rotation.y = (i * Math.PI * 2 / 4);
+                fin.position.x = Math.sin(fin.rotation.y) * 0.25;
+                fin.position.z = Math.cos(fin.rotation.y) * 0.25;
+                fin.castShadow = true;
                 rocketGroup.add(fin);
             }
             
-            // Rocket engine (small cylinder)
-            const engineGeometry = new THREE.CylinderGeometry(0.15, 0.15, 0.2, 32);
-            const engine = new THREE.Mesh(engineGeometry, new THREE.MeshPhongMaterial({ color: 0x333333 }));
+            // Rocket engine (small cylinder with more detail)
+            const engineGeometry = new THREE.CylinderGeometry(0.1, 0.1, 0.15, 32);
+            const engine = new THREE.Mesh(engineGeometry, new THREE.MeshPhongMaterial({ 
+                color: 0x222222,
+                shininess: 30
+            }));
             engine.position.y = 0;
+            engine.castShadow = true;
             rocketGroup.add(engine);
             
+            // Engine nozzle (cone)
+            const nozzleGeometry = new THREE.ConeGeometry(0.1, 0.1, 32);
+            const nozzle = new THREE.Mesh(nozzleGeometry, new THREE.MeshPhongMaterial({ 
+                color: 0x444444,
+                shininess: 50
+            }));
+            nozzle.position.y = -0.05;
+            nozzle.rotation.x = Math.PI;
+            nozzle.castShadow = true;
+            rocketGroup.add(nozzle);
+            
+            // Add some details (rings around the body)
+            const ringGeometry = new THREE.TorusGeometry(0.15, 0.01, 16, 32);
+            const ringMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
+            
+            const ring1 = new THREE.Mesh(ringGeometry, ringMaterial);
+            ring1.position.y = 0.8;
+            ring1.rotation.x = Math.PI / 2;
+            rocketGroup.add(ring1);
+            
+            const ring2 = new THREE.Mesh(ringGeometry, ringMaterial);
+            ring2.position.y = 0.2;
+            ring2.rotation.x = Math.PI / 2;
+            rocketGroup.add(ring2);
+            
             return rocketGroup;
         }
         
         // Particle systems
         function createFireParticles() {
-            const particleCount = 100;
+            const particleCount = 150;
             const particles = new THREE.BufferGeometry();
             const positions = new Float32Array(particleCount * 3);
             const colors = new Float32Array(particleCount * 3);
             const sizes = new Float32Array(particleCount);
             
             for (let i = 0; i < particleCount; i++) {
-                positions[i * 3] = (Math.random() - 0.5) * 0.2;
+                positions[i * 3] = (Math.random() - 0.5) * 0.15;
                 positions[i * 3 + 1] = Math.random() * -0.5;
-                positions[i * 3 + 2] = (Math.random() - 0.5) * 0.2;
+                positions[i * 3 + 2] = (Math.random() - 0.5) * 0.15;
                 
                 // Fire colors (red, orange, yellow)
                 const color = new THREE.Color(
@@ -226,16 +261,16 @@
         }
         
         function createSmokeParticles() {
-            const particleCount = 50;
+            const particleCount = 80;
             const particles = new THREE.BufferGeometry();
             const positions = new Float32Array(particleCount * 3);
             const colors = new Float32Array(particleCount * 3);
             const sizes = new Float32Array(particleCount);
             
             for (let i = 0; i < particleCount; i++) {
-                positions[i * 3] = (Math.random() - 0.5) * 0.5;
+                positions[i * 3] = (Math.random() - 0.5) * 0.3;
                 positions[i * 3 + 1] = Math.random() * -1;
-                positions[i * 3 + 2] = (Math.random() - 0.5) * 0.5;
+                positions[i * 3 + 2] = (Math.random() - 0.5) * 0.3;
                 
                 // Smoke colors (gray to white)
                 const gray = 0.5 + Math.random() * 0.5;
@@ -302,12 +337,8 @@
                 this.alive = true;
                 this.exploded = false;
                 
-                // Random rotation
-                this.rotationSpeed = new THREE.Vector3(
-                    (Math.random() - 0.5) * 0.02,
-                    (Math.random() - 0.5) * 0.02,
-                    (Math.random() - 0.5) * 0.02
-                );
+                // Store previous position for orientation calculation
+                this.prevPosition = startPosition.clone();
                 
                 scene.add(this.group);
                 activeRockets.push(this);
@@ -328,10 +359,28 @@
                 const point = this.curve.getPoint(this.progress);
                 this.group.position.copy(point);
                 
-                // Rotate rocket
-                this.rocket.rotation.x += this.rotationSpeed.x;
-                this.rocket.rotation.y += this.rotationSpeed.y;
-                this.rocket.rotation.z += this.rotationSpeed.z;
+                // Calculate direction vector
+                const direction = new THREE.Vector3().subVectors(point, this.prevPosition).normalize();
+                
+                // Only update orientation if we have significant movement
+                if (direction.length() > 0.001) {
+                    // Create a quaternion that orients the rocket along the direction vector
+                    const targetQuaternion = new THREE.Quaternion();
+                    const up = new THREE.Vector3(0, 1, 0);
+                    
+                    // Create a matrix that looks in the direction we're moving
+                    const rotationMatrix = new THREE.Matrix4();
+                    rotationMatrix.lookAt(new THREE.Vector3(0, 0, 0), direction, up);
+                    
+                    // Extract quaternion from matrix
+                    targetQuaternion.setFromRotationMatrix(rotationMatrix);
+                    
+                    // Apply rotation to the rocket (not the whole group)
+                    this.rocket.quaternion.copy(targetQuaternion);
+                    
+                    // Store current position for next frame
+                    this.prevPosition.copy(point);
+                }
                 
                 // Update particles
                 this.updateParticles();
@@ -343,9 +392,9 @@
                 for (let i = 0; i < firePositions.length; i += 3) {
                     firePositions[i + 1] -= 0.01;
                     if (firePositions[i + 1] < -0.5) {
-                        firePositions[i] = (Math.random() - 0.5) * 0.2;
+                        firePositions[i] = (Math.random() - 0.5) * 0.15;
                         firePositions[i + 1] = 0;
-                        firePositions[i + 2] = (Math.random() - 0.5) * 0.2;
+                        firePositions[i + 2] = (Math.random() - 0.5) * 0.15;
                     }
                 }
                 this.fireParticles.geometry.attributes.position.needsUpdate = true;
@@ -358,9 +407,9 @@
                     smokePositions[i + 2] += (Math.random() - 0.5) * 0.01;
                     
                     if (smokePositions[i + 1] > 0) {
-                        smokePositions[i] = (Math.random() - 0.5) * 0.5;
+                        smokePositions[i] = (Math.random() - 0.5) * 0.3;
                         smokePositions[i + 1] = -1 + Math.random() * 0.5;
-                        smokePositions[i + 2] = (Math.random() - 0.5) * 0.5;
+                        smokePositions[i + 2] = (Math.random() - 0.5) * 0.3;
                     }
                 }
                 this.smokeParticles.geometry.attributes.position.needsUpdate = true;

prompts.txt

@@ -1 +1,2 @@
-Create a fun 3d threejs toy to shoot rockets with fire and smoke particles, a detailed procedural rocket 3d model, threejs app, the rocket would alway start at the mouse cursors and fly back to the center of the circle in a indirect slow smooth random bezier trajectory to explode in the screen center.
+Create a fun 3d threejs toy to shoot rockets with fire and smoke particles, a detailed procedural rocket 3d model, threejs app, the rocket would alway start at the mouse cursors and fly back to the center of the circle in a indirect slow smooth random bezier trajectory to explode in the screen center.
+fix the rocket model quality and rocket orientation to the trajectory