bubbles-threlte
v1.0.0TypeScript
A highly customizable bubble generator component for Svelte applications using Threlte.
0/weekUpdated 1 years agoMITUnpacked: 35.8 KB
Published by Dmytro Kosorukov
npm install bubbles-threlteBubbles-Threlte: Svelte Bubble Generator
A highly customizable bubble generator component for Svelte applications using Threlte (Three.js for Svelte). Create stunning bubble effects with ease, perfect for interactive backgrounds, particle systems, and more.
Installation
``bash`
npm install bubbles-threlteUsage
Import the BubbleEmitter component in your Svelte file:
`ts`
import BubbleEmitter from 'bubbles-threlte';
Set up your bubble and emitter configurations:ts`
Use the BubbleEmitter component in your Svelte template:
`ts`
Configuration Parameters
--------------------BubbleParams
The BubbleParams interface provides extensive customization for individual bubbles:
| Parameter | Type | Description |
|-----------|------|-------------|
| id | string | Unique identifier for the bubble. |state
| | "creating" \| "active" \| "removing" | Current state of the bubble in its lifecycle. |position
| | Vector3 | The bubble's position in 3D space. |origin
| | Vector3 | The original spawn position of the bubble. |velocity
| | Vector3 | The bubble's current velocity. |size
| | number | The size of the bubble. |opacity
| | number | The overall opacity of the bubble. |geometry
| | SphereGeometry | The Three.js geometry used for the bubble. |animationSpeed
| | number | Speed of the bubble's animation. |smoothDeformWaveSin
| | number | Frequency of sinusoidal deformation. |smoothDeformWaveCos
| | number | Frequency of cosinusoidal deformation. |smoothDeformSpeedSin
| | number | Speed of sinusoidal deformation. |smoothDeformSpeedCos
| | number | Speed of cosinusoidal deformation. |smoothDeformStrengthSin
| | number | Strength of sinusoidal deformation. |smoothDeformStrengthCos
| | number | Strength of cosinusoidal deformation. |baseColor
| | Vector3 | The base color of the bubble (RGB). |borderColor
| | Vector3 | The color of the bubble's border (RGB). |reflectionColor
| | Vector3 | The color of reflections on the bubble (RGB). |baseAlpha
| | number | The base alpha (transparency) of the bubble. |borderAlpha
| | number | The alpha (transparency) of the bubble's border. |glowStrength
| | number | The strength of the bubble's glow effect. |gradientStrength
| | number | The strength of the color gradient effect. |gradientSpeed
| | number | The speed of the color gradient animation. |fresnel
| | Vector3 | Parameters for the Fresnel effect (edge highlighting). |fresnelStrength
| | number | The strength of the Fresnel effect. |noiseFrequency
| | number | The frequency of noise applied to the bubble's surface. |noiseAmplitude
| | number | The amplitude of noise applied to the bubble's surface. |seed
| | number | A random seed for consistent randomization. |bubbleFilter
| | (bubble: BubbleParams) => boolean | A function to determine if a bubble should be removed. |bubbleModifier
| | (bubble: BubbleParams) => void | A function to modify bubble properties on each frame. |createAnimation
| | BubbleAnimation | Animation parameters for bubble creation. |removeAnimation
| | BubbleAnimation | Animation parameters for bubble removal. |
--------------------BubbleAnimation
The BubbleAnimation interface is used for both createAnimation and removeAnimation:
| Parameter | Type | Description |
|-----------|------|-------------|
| params | (bubble: BubbleParams) => void | A function to update bubble parameters during the animation. |duration
| | number | The duration of the animation in milliseconds. |
These parameters provide extensive control over both the emission of bubbles and the appearance and behavior of individual bubbles. By adjusting these values, you can create a wide range of effects, from realistic soap bubbles to abstract particle systems.
--------------------BubbleEmitterParams
The BubbleEmitterParams interface allows you to configure the behavior of the bubble emitter:
| Parameter | Type | Description |
|-----------|------|-------------|
| spawnCondition | boolean | Determines whether new bubbles should be spawned. |velocity
| | Vector3 | The initial velocity applied to newly spawned bubbles. |bubbleSize
| | { min: number; max: number } | Defines the size range for spawned bubbles. |scatterAngle
| | { min: number; max: number } | Sets the range of angles (in degrees) for random direction scatter upon spawn. |maxBubbles
| | number | The maximum number of bubbles that can exist simultaneously. |
--------------------Event Emitter
The BubbleEventEmitter allows you to listen for various events during the lifecycle of bubbles. Available events include:
| Parameter | Description |
|-----------|-------------|
| creationStarted | Fired when a bubble starts its creation animation |creationFinished
| | Fired when a bubble completes its creation animation | removalStarted
| | Fired when a bubble starts its removal animation | removalFinished
| | Fired when a bubble completes its removal animation | move ` | Fired on each frame update for active bubbles |
|
These events can be used to trigger custom behaviors or synchronize other elements of your application with the bubble animations.
Examples
$3The ShinyPop example demonstrates how to create interactive bubbles that respond to mouse movement. - Bubbles spawn based on mouse velocity This example showcases the potential for creating engaging, interactive backgrounds or particle effects that respond to user input. | |
$3The ScreenCover example illustrates how to create a full-screen bubble animation. - Bubbles rise from the bottom of the screen This example is perfect for creating ambient background animations or loading screens with a soothing, aquatic feel. | |
$3The VoidStar example creates an abstract, cosmic-like effect using a single, highly detailed bubble. - High-resolution sphere geometry This example demonstrates how to use the bubble generator for creating unique, abstract visual effects beyond traditional bubble animations. | |
$3The Waves example showcases how to create a dynamic wave-like effect using a single, large bubble. - Custom deformation parameters for wave-like movement This example illustrates the potential for using the bubble generator to create more complex, fluid-like animations and effects. |
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.