@newkrok/three-particles 0.4.1 → 0.6.2

package/README.md

@@ -6,6 +6,10 @@ Particle system for ThreeJS
 
 You can create your own particle effects with it's editor https://github.com/NewKrok/three-particles-editor
 
+# Video
+- Projectiles: https://youtu.be/Q352JuxON04
+- First preview: https://youtu.be/dtN_bndvoGU
+
 # Live demo
 
 https://newkrok.com/three-particles-editor/index.html
@@ -18,4 +22,4 @@ Install with npm
 `npm i @newkrok/three-particles`
 
 Add as a package.json dependency
-`"dependencies": { ... "@newkrok/three-particles": "0.4.0" ... }, `
+`"dependencies": { ... "@newkrok/three-particles": "0.6.2" ... }, `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-particles",
-  "version": "0.4.1",
+  "version": "0.6.2",
   "description": "Particle system for ThreeJS",
   "main": "src/js/three-particles.js",
   "bin": {
@@ -12,7 +12,10 @@
   },
   "keywords": [
     "threejs",
+    "particle",
     "particles",
+    "particle engine",
+    "effects",
     "3d",
     "lib"
   ],
@@ -24,7 +27,7 @@
   "homepage": "https://github.com/NewKrok/three-particles#readme",
   "dependencies": {
     "easing-functions": "1.0.1",
-    "three": "0.136.0",
+    "three": "0.137.0",
     "three-noise": "^1.1.1"
   },
   "scripts": {

package/src/js/effects/three-particles/three-particles-bezier.js

@@ -0,0 +1,36 @@
+const nCr = (n, k) => {
+  let z = 1;
+  for (let i = 1; i <= k; i++) z *= (n + 1 - i) / i;
+  return z;
+};
+
+export const createBezierCurveFunction = (bezierPoints) => (percentage) => {
+  if (percentage < 0) return bezierPoints[0];
+  if (percentage > 1) return bezierPoints[bezierPoints.length - 1];
+
+  let start = 0;
+  let stop = bezierPoints.length - 1;
+
+  bezierPoints.find((point, index) => {
+    const result = percentage < point.percentage;
+    if (result) stop = index;
+    else if (point.percentage !== undefined) start = index;
+    return result;
+  });
+
+  const n = stop - start;
+  const calculatedPercentage =
+    (percentage - bezierPoints[start].percentage) /
+    (bezierPoints[stop].percentage - bezierPoints[start].percentage);
+
+  let value = 0;
+  for (let i = 0; i <= n; i++) {
+    const p = bezierPoints[start + i];
+    const c =
+      nCr(n, i) *
+      Math.pow(1 - calculatedPercentage, n - i) *
+      Math.pow(calculatedPercentage, i);
+    value += c * p.y;
+  }
+  return value;
+};

package/src/js/effects/three-particles/three-particles-curves.js

@@ -1,6 +1,7 @@
 import Easing from "easing-functions";
 
 export const CurveFunction = {
+  BEZIER: "BEZIER",
   LINEAR: "LINEAR",
   QUADRATIC_IN: "QUADRATIC_IN",
   QUADRATIC_OUT: "QUADRATIC_OUT",

package/src/js/effects/three-particles/three-particles-modifiers.js

@@ -1,7 +1,6 @@
-import * as THREE from "three/build/three.module.js";
+import * as THREE from "three";
 
 import { getCurveFunction } from "./three-particles-curves.js";
-import { size } from "lodash";
 
 const noiseInput = new THREE.Vector3(0, 0, 0);
 

package/src/js/effects/three-particles/three-particles-utils.js

@@ -1,4 +1,6 @@
-import * as THREE from "three/build/three.module.js";
+import * as THREE from "three";
+
+import { EmitFrom } from "../three-particles.js";
 
 export const patchObject = (
   objectA,
@@ -8,7 +10,12 @@ export const patchObject = (
   const result = {};
   Object.keys(objectA).forEach((key) => {
     if (!config.skippedProperties || !config.skippedProperties.includes(key)) {
-      if (typeof objectA[key] === "object" && objectA[key] && objectB[key]) {
+      if (
+        typeof objectA[key] === "object" &&
+        objectA[key] &&
+        objectB[key] &&
+        !Array.isArray(objectA[key])
+      ) {
         result[key] = patchObject(objectA[key], objectB[key], config);
       } else {
         result[key] =
@@ -109,6 +116,54 @@ export const calculateRandomPositionAndVelocityOnCone = (
   );
 };
 
+export const calculateRandomPositionAndVelocityOnBox = (
+  position,
+  velocity,
+  startSpeed,
+  { scale, emitFrom }
+) => {
+  switch (emitFrom) {
+    case EmitFrom.VOLUME:
+      position.x = Math.random() * scale.x - scale.x / 2;
+      position.y = Math.random() * scale.y - scale.y / 2;
+      position.z = Math.random() * scale.z - scale.z / 2;
+      break;
+
+    case EmitFrom.SHELL:
+      const side = Math.floor(Math.random() * 6);
+      const perpendicularAxis = side % 3;
+      const shellResult = [];
+      shellResult[perpendicularAxis] = side > 2 ? 1 : 0;
+      shellResult[(perpendicularAxis + 1) % 3] = Math.random();
+      shellResult[(perpendicularAxis + 2) % 3] = Math.random();
+      position.x = shellResult[0] * scale.x - scale.x / 2;
+      position.y = shellResult[1] * scale.y - scale.y / 2;
+      position.z = shellResult[2] * scale.z - scale.z / 2;
+      break;
+
+    case EmitFrom.EDGE:
+      const side2 = Math.floor(Math.random() * 6);
+      const perpendicularAxis2 = side2 % 3;
+      const edge = Math.floor(Math.random() * 4);
+      const edgeResult = [];
+      edgeResult[perpendicularAxis2] = side2 > 2 ? 1 : 0;
+      edgeResult[(perpendicularAxis2 + 1) % 3] =
+        edge < 2 ? Math.random() : edge - 2;
+      edgeResult[(perpendicularAxis2 + 2) % 3] =
+        edge < 2 ? edge : Math.random();
+      position.x = edgeResult[0] * scale.x - scale.x / 2;
+      position.y = edgeResult[1] * scale.y - scale.y / 2;
+      position.z = edgeResult[2] * scale.z - scale.z / 2;
+      break;
+  }
+
+  const randomizedSpeed = THREE.MathUtils.randFloat(
+    startSpeed.min,
+    startSpeed.max
+  );
+  velocity.set(0, 0, randomizedSpeed);
+};
+
 export const calculateRandomPositionAndVelocityOnCircle = (
   position,
   velocity,

package/src/js/effects/three-particles.js

@@ -1,6 +1,7 @@
-import * as THREE from "three/build/three.module.js";
+import * as THREE from "three";
 
 import {
+  calculateRandomPositionAndVelocityOnBox,
   calculateRandomPositionAndVelocityOnCircle,
   calculateRandomPositionAndVelocityOnCone,
   calculateRandomPositionAndVelocityOnRectangle,
@@ -13,6 +14,7 @@ import { FBM } from "three-noise/build/three-noise.module.js";
 import ParticleSystemFragmentShader from "./three-particles/shaders/particle-system-fragment-shader.glsl.js";
 import ParticleSystemVertexShader from "./three-particles/shaders/particle-system-vertex-shader.glsl.js";
 import { applyModifiers } from "./three-particles/three-particles-modifiers.js";
+import { createBezierCurveFunction } from "./three-particles/three-particles-bezier";
 
 let createdParticleSystems = [];
 
@@ -29,6 +31,12 @@ export const Shape = {
   RECTANGLE: "RECTANGLE",
 };
 
+export const EmitFrom = {
+  VOLUME: "VOLUME",
+  SHELL: "SHELL",
+  EDGE: "EDGE",
+};
+
 export const TimeMode = {
   LIFETIME: "LIFETIME",
   FPS: "FPS",
@@ -92,6 +100,10 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
       rotation: { x: 0.0, y: 0.0 }, // TODO: add z rotation
       scale: { x: 1.0, y: 1.0 },
     },
+    box: {
+      scale: { x: 1.0, y: 1.0, z: 1.0 },
+      emitFrom: EmitFrom.VOLUME,
+    },
   },
   map: null,
   renderer: {
@@ -115,7 +127,11 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   },
   sizeOverLifetime: {
     isActive: false,
-    curveFunction: CurveFunction.LINEAR,
+    curveFunction: CurveFunction.BEZIER,
+    bezierPoints: [
+      { x: 0, y: 0, percentage: 0 },
+      { x: 1, y: 1, percentage: 1 },
+    ],
   },
   /* colorOverLifetime: {
     isActive: false,
@@ -123,7 +139,11 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   }, */
   opacityOverLifetime: {
     isActive: false,
-    curveFunction: CurveFunction.LINEAR,
+    curveFunction: CurveFunction.BEZIER,
+    bezierPoints: [
+      { x: 0, y: 0, percentage: 0 },
+      { x: 1, y: 1, percentage: 1 },
+    ],
   },
   rotationOverLifetime: {
     isActive: false,
@@ -169,7 +189,7 @@ const createFloat32Attributes = ({
 };
 
 const calculatePositionAndVelocity = (
-  { shape, sphere, cone, circle, rectangle },
+  { shape, sphere, cone, circle, rectangle, box },
   startSpeed,
   position,
   velocity,
@@ -211,6 +231,15 @@ const calculatePositionAndVelocity = (
         rectangle
       );
       break;
+
+    case Shape.BOX:
+      calculateRandomPositionAndVelocityOnBox(
+        position,
+        velocity,
+        startSpeed,
+        box
+      );
+      break;
   }
 
   if (velocityOverLifetime.isActive) {
@@ -249,6 +278,22 @@ export const createParticleSystem = (
   };
 
   const normalizedConfig = patchObject(DEFAULT_PARTICLE_SYSTEM_CONFIG, config);
+
+  const bezierCompatibleProperties = [
+    "sizeOverLifetime",
+    "opacityOverLifetime",
+  ];
+  bezierCompatibleProperties.forEach((key) => {
+    if (
+      normalizedConfig[key].isActive &&
+      normalizedConfig[key].curveFunction === CurveFunction.BEZIER &&
+      normalizedConfig[key].bezierPoints
+    )
+      normalizedConfig[key].curveFunction = createBezierCurveFunction(
+        normalizedConfig[key].bezierPoints
+      );
+  });
+
   const {
     transform,
     duration,
@@ -435,7 +480,7 @@ export const createParticleSystem = (
     geometry.attributes.colorA.needsUpdate = true;
   };
 
-  const activateParticle = ({ particleIndex, activationTime }) => {
+  const activateParticle = ({ particleIndex, activationTime, position }) => {
     geometry.attributes.isActive.array[particleIndex] = true;
     generalData.creationTimes[particleIndex] = activationTime;
 
@@ -498,11 +543,12 @@ export const createParticleSystem = (
     );
     const positionIndex = Math.floor(particleIndex * 3);
     geometry.attributes.position.array[positionIndex] =
-      startPositions[particleIndex].x;
+      (position ? position.x : 0) + startPositions[particleIndex].x;
     geometry.attributes.position.array[positionIndex + 1] =
-      startPositions[particleIndex].y;
+      (position ? position.y : 0) + startPositions[particleIndex].y;
     geometry.attributes.position.array[positionIndex + 2] =
-      startPositions[particleIndex].z;
+      (position ? position.z : 0) + startPositions[particleIndex].z;
+    geometry.attributes.position.needsUpdate = true;
 
     geometry.attributes.lifetime.array[particleIndex] = 0;
     geometry.attributes.lifetime.needsUpdate = true;
@@ -596,19 +642,22 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
       gravityVelocity,
     } = generalData;
 
+    const lastWorldPositionSnapshot = { ...lastWorldPosition };
+
     const lifetime = now - creationTime;
     particleSystem.material.uniforms.elapsed.value = elapsed;
 
     particleSystem.getWorldPosition(currentWorldPosition);
-    if (lastWorldPosition.x !== -99999)
+    if (lastWorldPosition.x !== -99999) {
       worldPositionChange.set(
         currentWorldPosition.x - lastWorldPosition.x,
         currentWorldPosition.y - lastWorldPosition.y,
         currentWorldPosition.z - lastWorldPosition.z
       );
+      worldPositionChange.applyQuaternion(worldQuaternion.invert());
+    }
     generalData.distanceFromLastEmitByDistance += worldPositionChange.length();
     particleSystem.getWorldPosition(lastWorldPosition);
-
     particleSystem.getWorldQuaternion(worldQuaternion);
     if (
       lastWorldQuaternion.x === -99999 ||
@@ -618,16 +667,12 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
     ) {
       worldEuler.setFromQuaternion(worldQuaternion);
       lastWorldQuaternion.copy(worldQuaternion);
-
-      const tempPosX = particleSystem.position.x;
-      const tempPosY = particleSystem.position.y;
-      const tempPosZ = particleSystem.position.z;
-      gravityVelocity.set(0, gravity, 0);
-      particleSystem.position.set(0, 0, 0);
-      particleSystem.updateMatrixWorld();
+      gravityVelocity.set(
+        lastWorldPosition.x,
+        lastWorldPosition.y + gravity,
+        lastWorldPosition.z
+      );
       particleSystem.worldToLocal(gravityVelocity);
-      particleSystem.position.set(tempPosX, tempPosY, tempPosZ);
-      particleSystem.updateMatrixWorld();
     }
 
     generalData.creationTimes.forEach((entry, index) => {
@@ -648,11 +693,15 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
             gravity !== 0 ||
             velocity.x !== 0 ||
             velocity.y !== 0 ||
-            velocity.z !== 0
+            velocity.z !== 0 ||
+            worldPositionChange.x !== 0 ||
+            worldPositionChange.y !== 0 ||
+            worldPositionChange.z !== 0
           ) {
             const positionIndex = index * 3;
             const positionArr =
               particleSystem.geometry.attributes.position.array;
+
             if (simulationSpace === SimulationSpace.WORLD) {
               positionArr[positionIndex] -= worldPositionChange.x;
               positionArr[positionIndex + 1] -= worldPositionChange.y;
@@ -699,12 +748,28 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
                 (1 / emission.rateOverDistance)
             )
           : 0;
+      const distanceStep =
+        neededParticlesByDistance > 0
+          ? {
+              x:
+                (currentWorldPosition.x - lastWorldPositionSnapshot.x) /
+                neededParticlesByDistance,
+              y:
+                (currentWorldPosition.y - lastWorldPositionSnapshot.y) /
+                neededParticlesByDistance,
+              z:
+                (currentWorldPosition.z - lastWorldPositionSnapshot.z) /
+                neededParticlesByDistance,
+            }
+          : null;
       const neededParticles = neededParticlesByTime + neededParticlesByDistance;
 
-      if (emission.rateOverDistance > 0 && neededParticlesByDistance >= 1)
+      if (emission.rateOverDistance > 0 && neededParticlesByDistance >= 1) {
         generalData.distanceFromLastEmitByDistance = 0;
+      }
 
       if (neededParticles > 0) {
+        let generatedParticlesByDistanceNeeds = 0;
         for (let i = 0; i < neededParticles; i++) {
           let particleIndex = -1;
           particleSystem.geometry.attributes.isActive.array.find(
@@ -723,7 +788,19 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
             particleIndex <
               particleSystem.geometry.attributes.isActive.array.length
           ) {
-            activateParticle({ particleIndex, activationTime: now });
+            let position;
+            if (generatedParticlesByDistanceNeeds < neededParticlesByDistance) {
+              position =
+                generatedParticlesByDistanceNeeds < neededParticlesByDistance
+                  ? {
+                      x: distanceStep.x * generatedParticlesByDistanceNeeds,
+                      y: distanceStep.y * generatedParticlesByDistanceNeeds,
+                      z: distanceStep.z * generatedParticlesByDistanceNeeds,
+                    }
+                  : null;
+              generatedParticlesByDistanceNeeds++;
+            }
+            activateParticle({ particleIndex, activationTime: now, position });
             props.lastEmissionTime = now;
           }
         }