@newkrok/three-particles 0.5.0 → 0.6.0

package/README.md

@@ -18,4 +18,4 @@ Install with npm
 `npm i @newkrok/three-particles`
 
 Add as a package.json dependency
-`"dependencies": { ... "@newkrok/three-particles": "0.5.0" ... }, `
+`"dependencies": { ... "@newkrok/three-particles": "0.6.0" ... }, `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-particles",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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-modifiers.js

@@ -1,4 +1,4 @@
-import * as THREE from "three/build/three.module.js";
+import * as THREE from "three";
 
 import { getCurveFunction } from "./three-particles-curves.js";
 

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,
@@ -114,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,7 +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 "@newkrok/three-particles/src/js/effects/three-particles/three-particles-bezier";
+import { createBezierCurveFunction } from "./three-particles/three-particles-bezier";
 
 let createdParticleSystems = [];
 
@@ -30,6 +31,12 @@ export const Shape = {
   RECTANGLE: "RECTANGLE",
 };
 
+export const EmitFrom = {
+  VOLUME: "VOLUME",
+  SHELL: "SHELL",
+  EDGE: "EDGE",
+};
+
 export const TimeMode = {
   LIFETIME: "LIFETIME",
   FPS: "FPS",
@@ -93,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: {
@@ -178,7 +189,7 @@ const createFloat32Attributes = ({
 };
 
 const calculatePositionAndVelocity = (
-  { shape, sphere, cone, circle, rectangle },
+  { shape, sphere, cone, circle, rectangle, box },
   startSpeed,
   position,
   velocity,
@@ -220,6 +231,15 @@ const calculatePositionAndVelocity = (
         rectangle
       );
       break;
+
+    case Shape.BOX:
+      calculateRandomPositionAndVelocityOnBox(
+        position,
+        velocity,
+        startSpeed,
+        box
+      );
+      break;
   }
 
   if (velocityOverLifetime.isActive) {
@@ -528,6 +548,7 @@ export const createParticleSystem = (
       startPositions[particleIndex].y;
     geometry.attributes.position.array[positionIndex + 2] =
       startPositions[particleIndex].z;
+    geometry.attributes.position.needsUpdate = true;
 
     geometry.attributes.lifetime.array[particleIndex] = 0;
     geometry.attributes.lifetime.needsUpdate = true;