particle-emitter - add the component and inflator

examples/outdoor-festival/index.html

@@ -24,7 +24,7 @@
         if (url.startsWith("https://uploads-prod.reticulum.io/files/")) {
           newurl = url.replace(
             "https://uploads-prod.reticulum.io/files/",
-            "https://cdn.jsdelivr.net/gh/c-frame/outdoor-festival@e9311cf/"
+            "https://cdn.jsdelivr.net/gh/c-frame/outdoor-festival@d3e76c8/"
           );
         }
 

examples/playground/index.html

@@ -163,7 +163,7 @@ <h2 style="margin: 0; font-size: 1.2rem">Help</h2>
         For another scene, you probably want to set it to a higher value.
       -->
       <a-assets timeout="30000">
-        <a-asset-item id="sceneGLB" src="./hubs_components_example_005.glb"></a-asset-item>
+        <a-asset-item id="sceneGLB" src="./hubs_components_example_006.glb"></a-asset-item>
       </a-assets>
       <a-entity
         id="rig"

package.json

@@ -51,6 +51,7 @@
     "webpack-dev-server": "^5.0.2"
   },
   "dependencies": {
-    "three": "^0.162.0"
+    "three": "^0.162.0",
+    "lib-hubs": "github:mozillareality/lib-hubs#master"
   }
 }

src/components/particle-emitter.js

@@ -0,0 +1,105 @@
+/* global AFRAME */
+import { ParticleEmitter } from "lib-hubs/packages/three-particle-emitter/lib/esm/index";
+import { TextureLoader } from "three";
+import { disposeNode } from "../components/gltf-model-plus";
+
+AFRAME.registerComponent("particle-emitter", {
+  schema: {
+    src: { type: "string", default: "" },
+    startColor: { type: "color", default: "#ffffff" },
+    middleColor: { type: "color", default: "#ffffff" },
+    endColor: { type: "color", default: "#ffffff" },
+    startOpacity: { type: "number", default: 1 },
+    middleOpacity: { type: "number", default: 1 },
+    endOpacity: { type: "number", default: 1 },
+    colorCurve: { type: "string", default: "linear" },
+    sizeCurve: { type: "string", default: "linear" },
+    startSize: { type: "number", default: 0.25 },
+    endSize: { type: "number", default: 0.25 },
+    sizeRandomness: { type: "number", default: 0 },
+    ageRandomness: { type: "number", default: 10 },
+    lifetime: { type: "number", default: 5 },
+    lifetimeRandomness: { type: "number", default: 10 },
+    particleCount: { type: "number", default: 100 },
+    startVelocity: { type: "vec3", default: { x: 0, y: 0, z: 0.5 } },
+    endVelocity: { type: "vec3", default: { x: 0, y: 0, z: 0.5 } },
+    velocityCurve: { type: "string", default: "linear" },
+    angularVelocity: { type: "number", default: 0 },
+  },
+
+  init() {
+    this.particleEmitter = new ParticleEmitter(null);
+    this.particleEmitter.visible = false;
+    this.el.setObject3D("particle-emitter", this.particleEmitter);
+    this.updateParticles = false;
+  },
+
+  remove() {
+    disposeNode(this.particleEmitter);
+  },
+
+  async setTexture(src) {
+    const texture = await new TextureLoader().loadAsync(src);
+
+    // Guard against src changing while request was in flight
+    if (this.data.src !== src) {
+      return;
+    }
+
+    this.particleEmitter.material.uniforms.map.value = texture;
+    this.particleEmitter.visible = true;
+    this.updateParticles = true;
+  },
+
+  update(prevData) {
+    const data = this.data;
+    const particleEmitter = this.particleEmitter;
+
+    if (prevData.src !== data.src) {
+      this.setTexture(data.src, data.resolve).catch(console.error);
+    }
+
+    if (
+      prevData.startColor !== data.startColor ||
+      prevData.startSize !== data.startSize ||
+      prevData.sizeRandomness !== data.sizeRandomness ||
+      prevData.ageRandomness !== data.ageRandomness ||
+      prevData.lifetime !== data.lifetime ||
+      prevData.lifetimeRandomness !== data.lifetimeRandomness ||
+      prevData.particleCount !== data.particleCount
+    ) {
+      this.updateParticles = true;
+    }
+
+    particleEmitter.startColor.set(data.startColor);
+    particleEmitter.middleColor.set(data.middleColor);
+    particleEmitter.endColor.set(data.endColor);
+    particleEmitter.startOpacity = data.startOpacity;
+    particleEmitter.middleOpacity = data.middleOpacity;
+    particleEmitter.endOpacity = data.endOpacity;
+    particleEmitter.colorCurve = data.colorCurve;
+    particleEmitter.sizeCurve = data.sizeCurve;
+    particleEmitter.startSize = data.startSize;
+    particleEmitter.endSize = data.endSize;
+    particleEmitter.sizeRandomness = data.sizeRandomness;
+    particleEmitter.ageRandomness = data.ageRandomness;
+    particleEmitter.lifetime = data.lifetime;
+    particleEmitter.lifetimeRandomness = data.lifetimeRandomness;
+    particleEmitter.particleCount = data.particleCount;
+    particleEmitter.startVelocity.copy(data.startVelocity);
+    particleEmitter.endVelocity.copy(data.endVelocity);
+    particleEmitter.velocityCurve = data.velocityCurve;
+    particleEmitter.angularVelocity = data.angularVelocity;
+  },
+
+  tick(time, dt) {
+    if (this.updateParticles) {
+      this.particleEmitter.updateParticles();
+      this.updateParticles = false;
+    }
+
+    if (this.particleEmitter.visible) {
+      this.particleEmitter.update(dt / 1000);
+    }
+  },
+});

src/index.js

@@ -3,6 +3,7 @@ import "./components/environment-settings";
 import "./components/open-link";
 import "./components/gltf-model-plus";
 import "./components/media-frame";
+import "./components/particle-emitter";
 import "./components/reflection-probe";
 import "./components/simple-water";
 import "./components/uv-scroll";

src/inflators/index.js

@@ -5,6 +5,7 @@ import { inflateEnvironmentSettings } from "./environment-settings";
 import { inflateLink } from "./link";
 import { inflateMediaFrame } from "./media-frame";
 import { inflateNavMesh } from "./nav-mesh";
+import { inflateParticleEmitter } from "./particle-emitter";
 import { inflateReflectionProbe } from "./reflection-probe";
 import { inflateSimpleWater } from "./simple-water";
 import { inflateSpawnPoint } from "./spawn-point";
@@ -20,6 +21,7 @@ gltfInflators.set("environment-settings", inflateEnvironmentSettings);
 gltfInflators.set("link", inflateLink);
 gltfInflators.set("media-frame", inflateMediaFrame);
 gltfInflators.set("nav-mesh", inflateNavMesh);
+gltfInflators.set("particle-emitter", inflateParticleEmitter);
 gltfInflators.set("reflection-probe", inflateReflectionProbe);
 gltfInflators.set("spawn-point", inflateSpawnPoint);
 gltfInflators.set("simple-water", inflateSimpleWater);

src/inflators/particle-emitter.js

@@ -0,0 +1,7 @@
+import { absoluteURLForAsset, addComponent } from "./utils";
+
+export function inflateParticleEmitter(node, componentProps, otherComponents) {
+  componentProps.src = absoluteURLForAsset(componentProps.src);
+
+  addComponent(node, "particle-emitter", componentProps);
+}

webpack.config.js

@@ -40,4 +40,9 @@ module.exports = {
       },
     ],
   },
+  resolve: {
+    alias: {
+      "@mozillareality/easing-functions": path.resolve(__dirname, 'node_modules/lib-hubs/packages/easing-functions/lib/esm/index')
+    }
+  }
 };