@newkrok/three-particles 2.12.0 → 2.13.0

package/README.md

@@ -21,6 +21,7 @@ Particle system for ThreeJS.
 *   Serialization support for saving and loading particle system configs.
 *   GPU instancing renderer (`RendererType.INSTANCED`) — removes `gl_PointSize` hardware limit, ideal for large particles or high particle counts.
 *   Trail / Ribbon renderer (`RendererType.TRAIL`) — continuous ribbon trails behind particles with configurable width, opacity, and color tapering.
+*   Mesh particle renderer (`RendererType.MESH`) — render each particle as a 3D mesh (debris, gems, coins) using GPU instancing with full 3D rotation and simple directional lighting.
 *   TypeDoc API documentation available.
 
 # Live Demo & Examples

package/dist/index.d.ts

@@ -180,7 +180,23 @@ declare const enum RendererType {
      *
      * Configure trail-specific properties via {@link TrailConfig} on the renderer.
      */
-    TRAIL = "TRAIL"
+    TRAIL = "TRAIL",
+    /**
+     * Render each particle as a 3D mesh using GPU instancing (`InstancedBufferGeometry`).
+     * Instead of flat billboard sprites, particles are rendered as real 3D geometry
+     * (e.g., cubes, spheres, tori, or any custom `THREE.BufferGeometry`).
+     *
+     * Key differences from billboard renderers:
+     * - **3D rotation**: Particles rotate in all three axes (quaternion-based).
+     * - **Normals**: Mesh geometry retains normals, enabling basic lighting.
+     * - **Arbitrary geometry**: Any `THREE.BufferGeometry` can be used per particle.
+     *
+     * All existing modifiers (sizeOverLifetime, colorOverLifetime, noise, force fields,
+     * sub-emitters) work with mesh particles.
+     *
+     * Configure mesh-specific properties via {@link MeshConfig} on the renderer.
+     */
+    MESH = "MESH"
 }
 /**
  * Defines how force diminishes with distance from a POINT force field center.
@@ -682,6 +698,31 @@ type TrailConfig = {
         b: LifetimeCurve;
     };
 };
+/**
+ * Configuration for the mesh particle renderer.
+ * Controls which 3D geometry is used when `rendererType` is `RendererType.MESH`.
+ *
+ * @property geometry - A `THREE.BufferGeometry` to render for each particle.
+ *   Built-in Three.js primitives like `BoxGeometry`, `SphereGeometry`, `TorusGeometry`
+ *   all work. The geometry's own normals and UVs are preserved.
+ *
+ * @example
+ * ```typescript
+ * // Cube mesh particles
+ * mesh: {
+ *   geometry: new THREE.BoxGeometry(1, 1, 1),
+ * }
+ *
+ * // Icosahedron mesh particles
+ * mesh: {
+ *   geometry: new THREE.IcosahedronGeometry(0.5, 0),
+ * }
+ * ```
+ */
+type MeshConfig = {
+    /** The geometry to render for each particle. */
+    geometry: THREE.BufferGeometry;
+};
 /**
  * Configuration for the particle system renderer, controlling blending, transparency, depth, and background color behavior.
  *
@@ -742,6 +783,13 @@ type Renderer = {
      * @see TrailConfig
      */
     trail?: TrailConfig;
+    /**
+     * Mesh particle renderer configuration.
+     * Only used when `rendererType` is `RendererType.MESH`.
+     *
+     * @see MeshConfig
+     */
+    mesh?: MeshConfig;
 };
 /**
  * Configuration for noise effects applied to particles in a particle system.
@@ -1585,6 +1633,8 @@ type MappedAttributes = {
     colorG: AnyBufferAttribute;
     colorB: AnyBufferAttribute;
     colorA: AnyBufferAttribute;
+    /** Packed quaternion vec4 for 3D mesh rotation (only present for RendererType.MESH). */
+    quat?: AnyBufferAttribute;
 };
 type ParticleSystemInstance = {
     particleSystem: THREE.Points | THREE.Mesh;
@@ -2028,6 +2078,13 @@ declare const calculateRandomPositionAndVelocityOnRectangle: (position: THREE.Ve
     rotation: Point3D;
     scale: Point3D;
 }) => void;
+/**
+ * Creates a solid white 1x1 texture for mesh particles.
+ * Unlike the circle texture used by point/billboard renderers, mesh particles
+ * need a neutral texture so the geometry shape is visible.
+ * @returns {THREE.CanvasTexture | null} The generated texture or null if context fails.
+ */
+declare const createDefaultMeshTexture: () => THREE.CanvasTexture | null;
 /**
  * Creates a default white circle texture using CanvasTexture.
  * @returns {THREE.CanvasTexture | null} The generated texture or null if context fails.
@@ -2142,4 +2199,4 @@ declare const getDefaultParticleSystemConfig: () => any;
 declare const createParticleSystem: (config?: ParticleSystemConfig, externalNow?: number) => ParticleSystem;
 declare const updateParticleSystems: (cycleData: CycleData) => void;
 
-export { type BezierCurve, type BezierPoint, type Box, type Burst, type BurstState, type Circle, type Cone, type Constant, type CurveBase, type CurveFunction, CurveFunctionId, type CycleData, type EasingCurve, type Emission, EmitFrom, type ForceFieldConfig, ForceFieldFalloff, ForceFieldType, type GeneralData, LifeTimeCurve, type LifetimeCurve, type MappedAttributes, type MinMaxColor, type Noise, type NoiseConfig, type NormalizedForceFieldConfig, type NormalizedParticleSystemConfig, type ParticleSystem, type ParticleSystemConfig, type ParticleSystemInstance, type Point3D, type RandomBetweenTwoConstants, type Rectangle, type Renderer, RendererType, type Rgb, Shape, type ShapeConfig, SimulationSpace, type Sphere, type SubEmitterConfig, SubEmitterTrigger, type TextureSheetAnimation, TimeMode, type TrailConfig, type Transform, type VelocityOverLifetime, applyModifiers, blendingMap, calculateRandomPositionAndVelocityOnBox, calculateRandomPositionAndVelocityOnCircle, calculateRandomPositionAndVelocityOnCone, calculateRandomPositionAndVelocityOnRectangle, calculateRandomPositionAndVelocityOnSphere, calculateValue, createBezierCurveFunction, createDefaultParticleTexture, createParticleSystem, curveFunctionIdMap, getBezierCacheSize, getCurveFunction, getCurveFunctionFromConfig, getDefaultParticleSystemConfig, isLifeTimeCurve, removeBezierCurveFunction, updateParticleSystems };
+export { type BezierCurve, type BezierPoint, type Box, type Burst, type BurstState, type Circle, type Cone, type Constant, type CurveBase, type CurveFunction, CurveFunctionId, type CycleData, type EasingCurve, type Emission, EmitFrom, type ForceFieldConfig, ForceFieldFalloff, ForceFieldType, type GeneralData, LifeTimeCurve, type LifetimeCurve, type MappedAttributes, type MeshConfig, type MinMaxColor, type Noise, type NoiseConfig, type NormalizedForceFieldConfig, type NormalizedParticleSystemConfig, type ParticleSystem, type ParticleSystemConfig, type ParticleSystemInstance, type Point3D, type RandomBetweenTwoConstants, type Rectangle, type Renderer, RendererType, type Rgb, Shape, type ShapeConfig, SimulationSpace, type Sphere, type SubEmitterConfig, SubEmitterTrigger, type TextureSheetAnimation, TimeMode, type TrailConfig, type Transform, type VelocityOverLifetime, applyModifiers, blendingMap, calculateRandomPositionAndVelocityOnBox, calculateRandomPositionAndVelocityOnCircle, calculateRandomPositionAndVelocityOnCone, calculateRandomPositionAndVelocityOnRectangle, calculateRandomPositionAndVelocityOnSphere, calculateValue, createBezierCurveFunction, createDefaultMeshTexture, createDefaultParticleTexture, createParticleSystem, curveFunctionIdMap, getBezierCacheSize, getCurveFunction, getCurveFunctionFromConfig, getDefaultParticleSystemConfig, isLifeTimeCurve, removeBezierCurveFunction, updateParticleSystems };

package/dist/index.js

@@ -174,6 +174,7 @@ var RendererType = /* @__PURE__ */ ((RendererType2) => {
   RendererType2["POINTS"] = "POINTS";
   RendererType2["INSTANCED"] = "INSTANCED";
   RendererType2["TRAIL"] = "TRAIL";
+  RendererType2["MESH"] = "MESH";
   return RendererType2;
 })(RendererType || {});
 var ForceFieldFalloff = /* @__PURE__ */ ((ForceFieldFalloff2) => {
@@ -310,6 +311,24 @@ var calculateRandomPositionAndVelocityOnRectangle = (position, quaternion, veloc
   velocity.set(0, 0, speed);
   velocity.applyQuaternion(quaternion);
 };
+var createDefaultMeshTexture = () => {
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    const context = canvas.getContext("2d");
+    if (context) {
+      context.fillStyle = "white";
+      context.fillRect(0, 0, 1, 1);
+      const texture = new THREE4.CanvasTexture(canvas);
+      texture.needsUpdate = true;
+      return texture;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+};
 var createDefaultParticleTexture = () => {
   try {
     const canvas = document.createElement("canvas");
@@ -494,6 +513,16 @@ var applyModifiers = ({
     positionArr[positionIndex + 2] += noiseOnPosition * noisePower * positionAmount;
     attributes.position.needsUpdate = true;
   }
+  if (attributes.quat) {
+    const rotZ = attributes.rotation.array[particleIndex];
+    const halfZ = rotZ * 0.5;
+    const qi = particleIndex * 4;
+    attributes.quat.array[qi] = 0;
+    attributes.quat.array[qi + 1] = 0;
+    attributes.quat.array[qi + 2] = Math.sin(halfZ);
+    attributes.quat.array[qi + 3] = Math.cos(halfZ);
+    attributes.quat.needsUpdate = true;
+  }
 };
 
 // src/js/effects/three-particles/shaders/instanced-particle-fragment-shader.glsl.ts
@@ -630,6 +659,129 @@ var InstancedParticleVertexShader = `
 `;
 var instanced_particle_vertex_shader_glsl_default = InstancedParticleVertexShader;
 
+// src/js/effects/three-particles/shaders/mesh-particle-fragment-shader.glsl.ts
+var MeshParticleFragmentShader = `
+  uniform sampler2D map;
+  uniform float elapsed;
+  uniform float fps;
+  uniform bool useFPSForFrameIndex;
+  uniform vec2 tiles;
+  uniform bool discardBackgroundColor;
+  uniform vec3 backgroundColor;
+  uniform float backgroundColorTolerance;
+
+  varying vec4 vColor;
+  varying float vLifetime;
+  varying float vStartLifetime;
+  varying float vStartFrame;
+  varying float vRotation;
+  varying vec3 vNormal;
+  varying vec2 vUv;
+
+  #include <common>
+  #include <logdepthbuf_pars_fragment>
+
+  void main()
+  {
+    gl_FragColor = vColor;
+
+    // Use mesh UVs directly for texture sampling
+    vec2 uvPoint = vUv;
+
+    // Apply texture sheet animation if tiles > 1x1
+    if (tiles.x > 1.0 || tiles.y > 1.0) {
+      float frameIndex = round(vStartFrame) + (
+        useFPSForFrameIndex == true
+          ? fps == 0.0
+              ? 0.0
+              : max((vLifetime / 1000.0) * fps, 0.0)
+          : max(min(floor(min(vLifetime / vStartLifetime, 1.0) * (tiles.x * tiles.y)), tiles.x * tiles.y - 1.0), 0.0)
+      );
+
+      float spriteXIndex = floor(mod(frameIndex, tiles.x));
+      float spriteYIndex = floor(mod(frameIndex / tiles.x, tiles.y));
+
+      uvPoint = vec2(
+        vUv.x / tiles.x + spriteXIndex / tiles.x,
+        vUv.y / tiles.y + spriteYIndex / tiles.y
+      );
+    }
+
+    vec4 texColor = texture2D(map, uvPoint);
+    gl_FragColor = gl_FragColor * texColor;
+
+    if (discardBackgroundColor && abs(length(texColor.rgb - backgroundColor.rgb)) < backgroundColorTolerance) discard;
+
+    // Simple directional lighting from camera direction
+    float lightIntensity = 0.5 + 0.5 * max(dot(vNormal, vec3(0.0, 0.0, 1.0)), 0.0);
+    gl_FragColor.rgb *= lightIntensity;
+
+    #include <logdepthbuf_fragment>
+  }
+`;
+var mesh_particle_fragment_shader_glsl_default = MeshParticleFragmentShader;
+
+// src/js/effects/three-particles/shaders/mesh-particle-vertex-shader.glsl.ts
+var MeshParticleVertexShader = `
+  attribute float instanceSize;
+  attribute float instanceColorR;
+  attribute float instanceColorG;
+  attribute float instanceColorB;
+  attribute float instanceColorA;
+  attribute float instanceLifetime;
+  attribute float instanceStartLifetime;
+  attribute float instanceRotation;
+  attribute float instanceStartFrame;
+  attribute vec3 instanceOffset;
+  attribute vec4 instanceQuat;
+
+  varying vec4 vColor;
+  varying float vLifetime;
+  varying float vStartLifetime;
+  varying float vStartFrame;
+  varying float vRotation;
+  varying vec3 vNormal;
+  varying vec2 vUv;
+
+  #include <common>
+  #include <logdepthbuf_pars_vertex>
+
+  vec3 applyQuaternion(vec3 v, vec4 q) {
+    vec3 t = 2.0 * cross(q.xyz, v);
+    return v + q.w * t + cross(q.xyz, t);
+  }
+
+  void main()
+  {
+    vColor = vec4(instanceColorR, instanceColorG, instanceColorB, instanceColorA);
+    vLifetime = instanceLifetime;
+    vStartLifetime = instanceStartLifetime;
+    vStartFrame = instanceStartFrame;
+    vRotation = instanceRotation;
+
+    // Apply quaternion rotation to the mesh vertex position
+    vec3 rotatedPosition = applyQuaternion(position, instanceQuat);
+
+    // Scale mesh by particle size
+    vec3 scaledPosition = rotatedPosition * instanceSize;
+
+    // Apply instance offset (particle world position)
+    vec3 worldPos = scaledPosition + instanceOffset;
+
+    vec4 mvPosition = modelViewMatrix * vec4(worldPos, 1.0);
+    gl_Position = projectionMatrix * mvPosition;
+
+    // Transform normal by quaternion for lighting
+    vNormal = normalize((modelViewMatrix * vec4(applyQuaternion(normal, instanceQuat), 0.0)).xyz);
+
+    // Pass through UVs from the mesh geometry
+    vUv = uv;
+
+    #include <logdepthbuf_vertex>
+  }
+`;
+var mesh_particle_vertex_shader_glsl_default = MeshParticleVertexShader;
+
 // src/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.ts
 var ParticleSystemFragmentShader = `
   uniform sampler2D map;
@@ -1239,7 +1391,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     config,
     { applyToFirstObject: false, skippedProperties: [] }
   );
-  let particleMap = normalizedConfig.map || createDefaultParticleTexture();
+  let particleMap = normalizedConfig.map || (normalizedConfig.renderer.rendererType === "MESH" /* MESH */ ? createDefaultMeshTexture() : createDefaultParticleTexture());
   const {
     transform,
     duration,
@@ -1424,7 +1576,9 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     }));
   }
   const useTrail = renderer.rendererType === "TRAIL" /* TRAIL */;
-  const useInstancing = !useTrail && renderer.rendererType === "INSTANCED" /* INSTANCED */;
+  const useMesh = renderer.rendererType === "MESH" /* MESH */;
+  const useInstancing = !useTrail && !useMesh && renderer.rendererType === "INSTANCED" /* INSTANCED */;
+  const useInstancedAttributes = useInstancing || useMesh;
   const defaultTrailCurve = {
     type: "BEZIER" /* BEZIER */,
     scale: 1,
@@ -1455,8 +1609,8 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     generalData.positionHistoryIndex = new Uint16Array(maxParticles);
     generalData.positionHistoryCount = new Uint16Array(maxParticles);
   }
-  const attr = (name) => useInstancing ? `instance${name.charAt(0).toUpperCase()}${name.slice(1)}` : name;
-  const posAttr = useInstancing ? "instanceOffset" : "position";
+  const attr = (name) => useInstancedAttributes ? `instance${name.charAt(0).toUpperCase()}${name.slice(1)}` : name;
+  const posAttr = useInstancedAttributes ? "instanceOffset" : "position";
   const sharedUniforms = {
     elapsed: { value: 0 },
     map: { value: particleMap },
@@ -1470,17 +1624,46 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     backgroundColorTolerance: { value: renderer.backgroundColorTolerance },
     ...useInstancing ? { viewportHeight: { value: 1 } } : {}
   };
+  const getVertexShader = () => {
+    if (useMesh) return mesh_particle_vertex_shader_glsl_default;
+    if (useInstancing) return instanced_particle_vertex_shader_glsl_default;
+    return particle_system_vertex_shader_glsl_default;
+  };
+  const getFragmentShader = () => {
+    if (useMesh) return mesh_particle_fragment_shader_glsl_default;
+    if (useInstancing) return instanced_particle_fragment_shader_glsl_default;
+    return particle_system_fragment_shader_glsl_default;
+  };
   const material = new THREE4.ShaderMaterial({
     uniforms: sharedUniforms,
-    vertexShader: useInstancing ? instanced_particle_vertex_shader_glsl_default : particle_system_vertex_shader_glsl_default,
-    fragmentShader: useInstancing ? instanced_particle_fragment_shader_glsl_default : particle_system_fragment_shader_glsl_default,
+    vertexShader: getVertexShader(),
+    fragmentShader: getFragmentShader(),
     transparent: renderer.transparent,
     blending: renderer.blending,
     depthTest: renderer.depthTest,
     depthWrite: renderer.depthWrite
   });
   let geometry;
-  if (useInstancing) {
+  if (useMesh) {
+    const meshConfig = renderer.mesh;
+    if (!meshConfig?.geometry) {
+      throw new Error(
+        "RendererType.MESH requires a mesh configuration with a geometry. Set renderer.mesh.geometry to a THREE.BufferGeometry instance."
+      );
+    }
+    const instancedGeometry = new THREE4.InstancedBufferGeometry();
+    const sourceGeom = meshConfig.geometry;
+    const srcPos = sourceGeom.getAttribute("position");
+    if (srcPos) instancedGeometry.setAttribute("position", srcPos);
+    const srcNormal = sourceGeom.getAttribute("normal");
+    if (srcNormal) instancedGeometry.setAttribute("normal", srcNormal);
+    const srcUv = sourceGeom.getAttribute("uv");
+    if (srcUv) instancedGeometry.setAttribute("uv", srcUv);
+    const srcIndex = sourceGeom.getIndex();
+    if (srcIndex) instancedGeometry.setIndex(srcIndex);
+    instancedGeometry.instanceCount = maxParticles;
+    geometry = instancedGeometry;
+  } else if (useInstancing) {
     const instancedGeometry = new THREE4.InstancedBufferGeometry();
     const quadPositions = new Float32Array([
       -0.5,
@@ -1521,28 +1704,28 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     positionArray[i * 3 + 1] = startPositions[i].y;
     positionArray[i * 3 + 2] = startPositions[i].z;
   }
-  const positionAttribute = useInstancing ? new THREE4.InstancedBufferAttribute(positionArray, 3) : new THREE4.BufferAttribute(positionArray, 3);
+  const positionAttribute = useInstancedAttributes ? new THREE4.InstancedBufferAttribute(positionArray, 3) : new THREE4.BufferAttribute(positionArray, 3);
   geometry.setAttribute(posAttr, positionAttribute);
   createFloat32Attributes({
     geometry,
     propertyName: attr("isActive"),
     maxParticles,
     factory: 0,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("lifetime"),
     maxParticles,
     factory: 0,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("startLifetime"),
     maxParticles,
     factory: () => calculateValue(generalData.particleSystemId, startLifetime, 0) * 1e3,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
@@ -1553,21 +1736,21 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       textureSheetAnimation.startFrame,
       0
     ) : 0,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("size"),
     maxParticles,
     factory: (_, index) => generalData.startValues.startSize[index],
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("rotation"),
     maxParticles,
     factory: 0,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   const colorRandomRatio = Math.random();
   createFloat32Attributes({
@@ -1575,29 +1758,39 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     propertyName: attr("colorR"),
     maxParticles,
     factory: () => startColor.min.r + colorRandomRatio * (startColor.max.r - startColor.min.r),
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("colorG"),
     maxParticles,
     factory: () => startColor.min.g + colorRandomRatio * (startColor.max.g - startColor.min.g),
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("colorB"),
     maxParticles,
     factory: () => startColor.min.b + colorRandomRatio * (startColor.max.b - startColor.min.b),
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("colorA"),
     maxParticles,
     factory: 0,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
+  if (useMesh) {
+    const quatArray = new Float32Array(maxParticles * 4);
+    for (let i = 0; i < maxParticles; i++) {
+      quatArray[i * 4 + 3] = 1;
+    }
+    geometry.setAttribute(
+      attr("quat"),
+      new THREE4.InstancedBufferAttribute(quatArray, 4)
+    );
+  }
   const a = geometry.attributes;
   const aIsActive = a[attr("isActive")];
   const aColorR = a[attr("colorR")];
@@ -1610,6 +1803,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
   const aRotation = a[attr("rotation")];
   const aLifetime = a[attr("lifetime")];
   const aPosition = a[posAttr];
+  const aQuat = useMesh ? a[attr("quat")] : void 0;
   const deactivateParticle = (particleIndex) => {
     aIsActive.array[particleIndex] = 0;
     aColorA.array[particleIndex] = 0;
@@ -1671,6 +1865,16 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       generalData.normalizedLifetimePercentage
     );
     aRotation.needsUpdate = true;
+    if (aQuat) {
+      const rotZ = aRotation.array[particleIndex];
+      const halfZ = rotZ * 0.5;
+      const qi = particleIndex * 4;
+      aQuat.array[qi] = 0;
+      aQuat.array[qi + 1] = 0;
+      aQuat.array[qi + 2] = Math.sin(halfZ);
+      aQuat.array[qi + 3] = Math.cos(halfZ);
+      aQuat.needsUpdate = true;
+    }
     if (normalizedConfig.rotationOverLifetime.isActive)
       generalData.lifetimeValues.rotationOverLifetime[particleIndex] = THREE4.MathUtils.randFloat(
         normalizedConfig.rotationOverLifetime.min,
@@ -1796,7 +2000,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
           },
           renderer: {
             ...subConfig.config.renderer ?? {},
-            rendererType: renderer.rendererType
+            ...subConfig.config.renderer?.rendererType ? {} : renderer.rendererType === "MESH" /* MESH */ || renderer.rendererType === "TRAIL" /* TRAIL */ ? {} : { rendererType: renderer.rendererType }
           },
           ...inheritVelocity > 0 ? {
             startSpeed: (typeof subConfig.config.startSpeed === "number" ? subConfig.config.startSpeed : typeof subConfig.config.startSpeed === "object" && subConfig.config.startSpeed !== null && "min" in subConfig.config.startSpeed ? subConfig.config.startSpeed.min ?? 0 : 0) + velocity.length() * inheritVelocity
@@ -1923,7 +2127,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       };
     }
   }
-  let particleSystem = useInstancing ? new THREE4.Mesh(geometry, material) : new THREE4.Points(geometry, material);
+  let particleSystem = useInstancing || useMesh ? new THREE4.Mesh(geometry, material) : new THREE4.Points(geometry, material);
   if (useInstancing) {
     particleSystem.onBeforeRender = (glRenderer) => {
       const size = glRenderer.getSize(new THREE4.Vector2());
@@ -1950,7 +2154,8 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     colorR: aColorR,
     colorG: aColorG,
     colorB: aColorB,
-    colorA: aColorA
+    colorA: aColorA,
+    ...useMesh ? { quat: aQuat } : {}
   };
   const calculatedCreationTime = now + calculateValue(generalData.particleSystemId, startDelay) * 1e3;
   let wrapper;
@@ -2491,6 +2696,6 @@ var updateParticleSystems = (cycleData) => {
   );
 };
 
-export { CurveFunctionId, EmitFrom, ForceFieldFalloff, ForceFieldType, LifeTimeCurve, RendererType, Shape, SimulationSpace, SubEmitterTrigger, TimeMode, applyModifiers, blendingMap, calculateRandomPositionAndVelocityOnBox, calculateRandomPositionAndVelocityOnCircle, calculateRandomPositionAndVelocityOnCone, calculateRandomPositionAndVelocityOnRectangle, calculateRandomPositionAndVelocityOnSphere, calculateValue, createBezierCurveFunction, createDefaultParticleTexture, createParticleSystem, curveFunctionIdMap, getBezierCacheSize, getCurveFunction, getCurveFunctionFromConfig, getDefaultParticleSystemConfig, isLifeTimeCurve, removeBezierCurveFunction, updateParticleSystems };
+export { CurveFunctionId, EmitFrom, ForceFieldFalloff, ForceFieldType, LifeTimeCurve, RendererType, Shape, SimulationSpace, SubEmitterTrigger, TimeMode, applyModifiers, blendingMap, calculateRandomPositionAndVelocityOnBox, calculateRandomPositionAndVelocityOnCircle, calculateRandomPositionAndVelocityOnCone, calculateRandomPositionAndVelocityOnRectangle, calculateRandomPositionAndVelocityOnSphere, calculateValue, createBezierCurveFunction, createDefaultMeshTexture, createDefaultParticleTexture, createParticleSystem, curveFunctionIdMap, getBezierCacheSize, getCurveFunction, getCurveFunctionFromConfig, getDefaultParticleSystemConfig, isLifeTimeCurve, removeBezierCurveFunction, updateParticleSystems };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map