https://github.com/a-rudenko/webgl-tech-particles
Interactive 3D particle system with technology icons using WebGL and Three.js.
https://github.com/a-rudenko/webgl-tech-particles
3d animation javascript particles-animations technologies threejs webgl
Last synced: about 2 months ago
JSON representation
Interactive 3D particle system with technology icons using WebGL and Three.js.
- Host: GitHub
- URL: https://github.com/a-rudenko/webgl-tech-particles
- Owner: a-rudenko
- License: mit
- Created: 2025-01-21T21:03:28.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-23T21:04:07.000Z (3 months ago)
- Last Synced: 2025-02-23T22:18:48.189Z (3 months ago)
- Topics: 3d, animation, javascript, particles-animations, technologies, threejs, webgl
- Language: JavaScript
- Homepage: https://a-rudenko.github.io/webgl-tech-particles/demo.html
- Size: 1.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
WebGL Tech Particles
Interactive 3D particle system with technology icons using WebGL and Three.js.
This project is an interactive 3D visualization of technology icons (e.g., JavaScript, Python, React, Docker, etc.)
implemented with WebGL and Three.js. Particles representing different technologies move dynamically in a 3D space,
connecting with each other based on customizable parameters.
Install
Using npm:
```bash
npm i webgl-tech-particles
```
Usage
```js
import {initWebGLTechParticles} from 'webgl-tech-particles';
initWebGLTechParticles('tech-particles');
```
To apply your custom settings, you need to specify the path to `settings.json` as the second parameter
in `initWebGLTechParticles`:
```js
import {initWebGLTechParticles} from 'webgl-tech-particles';
initWebGLTechParticles('tech-particles', 'settings.json');
```
If you want to use a custom icon set, you need to specify the path to the icon folder in your `settings.json`:
```
"iconFolderPath": "icons"
```
Also in the icon folder you need to create a file `iconList.json` and specify which icons to load.
Example of `iconList.json`:
```
[
"vue.webp",
"react.webp",
"dart.webp",
"rust.webp",
"aws.webp"
]
```
For correct operation, it is better to upload small icons in png and webp formats.
CDN Usage
You can also use this package directly in the browser via CDN without installing it via npm. To do this, include the following script tag in your HTML file:
```html
import { initWebGLTechParticles } from 'https://cdn.jsdelivr.net/npm/webgl-tech-particles@:vesrion/dist/webgl-tech-particles.js';
initWebGLTechParticles('tech-particles', 'settings.json');
```
Replace `:vesrion` with the version you need
Settings
Example with basic
settings.
You can also export settings from the demo version.
Below is a description of the settings.
Particle Settings:
| Name | Default | Description |
|------------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
| `enableRotation` | `false` | Enable/disable sphere rotation |
| `rotationSpeed` | `0.1` | Rotation speed |
| `showLines` | `true` | Show/hide meshes between particles (icons) |
| `minDistance` | `150` | Minimum distance to create meshes connecting particles |
| `maxConnections` | `20` | Maximum number of connections |
| `particleVelocity` | `0.1` | Velocity of particles |
| `colorEnabled []` | `[true, true, true]` | The sphere can have 3 colors for the meshes connecting the particles, this setting allows you to turn on/off certain colors |
| `availableColors []` | `['#b02727', '#454545','#15154c']` | Available colors for meshes |
| `enableCameraControls` | `true` | Enable/disable the ability to rotate and resize the sphere |
Camera Settings:
| Name | Default | Description |
|---------------|---------|---------------------------------------------------------------------------|
| `positionZ` | `1750` | Initial position of the sphere by Z coordinates |
| `farPlane` | `4000` | The farthest distance that can be obtained by resizing a sphere |
| `nearPlane` | `1` | Minimum distance from the camera at which objects begin to be displayed |
| `fieldOfView` | `45` | Maximum distance from the camera at which objects will still be displayed |
Orbit Controls Settings:
| Name | Default | Description |
|---------------|---------|-----------------------------------------------------------------|
| `minDistance` | `1000` | Minimum distance the camera can get to the target (focus point) |
| `maxDistance` | `3000` | Maximum distance the camera can get to the target (focus point) |
Scene Settings:
| Name | Default | Description |
|---------------------|---------|----------------------------------------|
| `halfRadius` | `400` | Radius value for constructing a sphere |
| `iconSize` | `20` | Icons size |
| `particlesCount` | `500` | Number of particles |
| `maxParticlesCount` | `1000` | Maximum number of particles |
Credits
It is mainly developed using the JavaScript 3D library three.js.
License
MIT