feat: add reactor trail effect to rocket landing sample

Author: cheleb

.gitignore

@@ -17,3 +17,4 @@ dist/
 version.sbt
 
 externals/
+submodules/three.js/

example/client/src/main/scala/dev/cheleb/scalajswebgl/samples/three/games/ReactorTrail.scala

@@ -0,0 +1,81 @@
+package dev.cheleb.scalajswebgl.samples.three.games
+
+import THREE.*
+import scala.scalajs.js
+import scala.util.Random
+import scala.math.*
+
+class ReactorTrail(scene: Scene) {
+  private val particles  = js.Array[Mesh]()
+  private val velocities = js.Array[Vector3]()
+  private val lives      = js.Array[Double]()
+
+  private val geometry = SphereGeometry(0.1, 8, 8)
+
+  def emit(position: Vector3, rotationZ: Double): Unit = {
+    // Offset position to be at the bottom of the rocket
+    val offset = Vector3(
+      sin(rotationZ) * 0.75,
+      -cos(rotationZ) * 0.75,
+      0
+    )
+    val emitPos = position.jsClone().add(offset)
+
+    val color    = if (Random.nextBoolean()) 0xffff00 else 0xff8800 // Yellow or Orange
+    val material = MeshBasicMaterial(color = color)
+    val particle = Mesh(geometry, material)
+
+    particle.position.copy(emitPos)
+
+    // Velocity is mostly opposite to thrust direction with some spread
+    val vMag     = 0.1 + Random.nextDouble() * 0.1
+    val spread   = (Random.nextDouble() - 0.5) * 0.15
+    val velocity = Vector3(
+      sin(rotationZ) * vMag + cos(rotationZ) * spread,
+      -cos(rotationZ) * vMag + sin(rotationZ) * spread,
+      (Random.nextDouble() - 0.5) * 0.05
+    )
+
+    particles.push(particle)
+    velocities.push(velocity)
+    lives.push(1.0)
+    scene.add(particle)
+  }
+
+  def update(): Unit = {
+    var i = 0
+    while (i < particles.length) {
+      val p = particles(i)
+      val v = velocities(i)
+      lives(i) -= 0.05
+
+      if (lives(i) <= 0) {
+        scene.remove(p)
+        p.material.foreach {
+          case m: Material => m.dispose()
+          case _           =>
+        }
+        particles.splice(i, 1)
+        velocities.splice(i, 1)
+        lives.splice(i, 1)
+      } else {
+        p.position.asInstanceOf[js.Dynamic].add(v)
+        p.scale.asInstanceOf[js.Dynamic].multiplyScalar(0.95)
+        i += 1
+      }
+    }
+  }
+
+  def clear(): Unit = {
+    particles.foreach { p =>
+      scene.remove(p)
+      p.material.foreach {
+        case m: Material => m.dispose()
+        case _           =>
+      }
+    }
+    particles.length = 0
+    velocities.length = 0
+    lives.length = 0
+  }
+}

example/client/src/main/scala/dev/cheleb/scalajswebgl/samples/three/games/RocketLandingSample.scala

@@ -23,8 +23,8 @@ object RocketLandingSample {
     )
 
     // Game Constants
-    val GRAVITY              = -0.002
-    val THRUST               = 0.01
+    val GRAVITY              = -0.0005
+    val THRUST               = 0.005
     val ROTATION_SPEED       = 0.05
     val MAX_LANDING_VELOCITY = -0.10
 
@@ -102,6 +102,7 @@ object RocketLandingSample {
     var landed    = false
     var crashed   = false
     val explosion = new ExplosionEffect(scene)
+    val trail     = new ReactorTrail(scene)
 
     val keys = js.Dictionary[Boolean]()
     window.addEventListener("keydown", (e: dom.KeyboardEvent) => keys(e.key) = true)
@@ -119,6 +120,7 @@ object RocketLandingSample {
       crashed = false
       messageVar.set("")
       explosion.clear()
+      trail.clear()
       rocketGroup.visible = true
     }
     reset()
@@ -137,6 +139,7 @@ object RocketLandingSample {
           vx += forceX
           vy += forceY
           fuel -= 0.2
+          for (_ <- 0 until 3) trail.emit(rocketGroup.position, rotationZ)
         }
         if (keys.getOrElse("ArrowLeft", false)) {
           rocketGroup.rotation.z = rotationZ + ROTATION_SPEED
@@ -189,6 +192,7 @@ object RocketLandingSample {
       }
 
       explosion.update()
+      trail.update()
       renderer.render(scene, camera)
     }
 

modules/three/src/main/scala/THREE/math/Vector3.scala

@@ -18,4 +18,7 @@ class Vector3(
   def copy(v: Vector3): this.type          = js.native
   def add(v: Vector3): this.type           = js.native
   def multiplyScalar(s: Double): this.type = js.native
+
+  @JSName("clone")
+  def jsClone(): this.type = js.native
 }