Skip to content

Commit be62a90

Browse files
a-rudenkoa-rudenko
committed
docs: update README.md. Add LICENSE. Update package version.
1 parent d72350e commit be62a90

File tree

4 files changed

+135
-86
lines changed

4 files changed

+135
-86
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Aleksey Rudenko
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,35 @@
22

33
Interactive 3D particle system with technology icons using WebGL and Three.js.
44

5-
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.
5+
This project is an interactive 3D visualization of technology icons (e.g., JavaScript, Python, React, Docker, etc.)
6+
implemented with WebGL and Three.js. Particles representing different technologies move dynamically in a 3D space,
7+
connecting with each other based on customizable parameters.
68

79
<h2>Usage</h2>
810

911
```js
10-
import { initWebGLTechParticles } from './dist/webgl-tech-particles.js';
12+
import {initWebGLTechParticles} from 'webgl-tech-particles';
1113

1214
initWebGLTechParticles('tech-particles');
1315
```
1416

15-
If you want to use a custom icon set, you need to specify the path to the icon folder in `initWebGLTechParticles`. Also in the icon folder you need to create a file `iconList.json` and specify which icons to load.
17+
To apply your custom settings, you need to specify the path to `settings.json` as the second parameter
18+
in `initWebGLTechParticles`:
1619

1720
```js
18-
import { initWebGLTechParticles } from './dist/webgl-tech-particles.js';
21+
import {initWebGLTechParticles} from 'webgl-tech-particles';
1922

20-
initWebGLTechParticles('tech-particles', 'assets/icons');
23+
initWebGLTechParticles('tech-particles', 'settings.json');
2124
```
2225

26+
If you want to use a custom icon set, you need to specify the path to the icon folder in your `settings.json`:
27+
28+
```
29+
"iconFolderPath": "icons"
30+
```
31+
32+
Also in the icon folder you need to create a file `iconList.json` and specify which icons to load.
33+
2334
Example of `iconList.json`:
2435

2536
```
@@ -36,32 +47,33 @@ Example of `iconList.json`:
3647

3748
<h2>Settings</h2>
3849

39-
Example with basic <a href="https://github.com/a-rudenko/webgl-tech-particles/blob/main/settings.json" target="_blank">settings</a>.
50+
Example with basic <a href="https://github.com/a-rudenko/webgl-tech-particles/blob/main/settings.json" target="_blank">
51+
settings</a>.
4052

4153
Below is a description of the settings.
4254

4355
<h3>Particle Settings:</h3>
4456

45-
| Name | Default | Description |
46-
|-------------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
47-
| `enableRotation` | `false` | Enable/disable sphere rotation |
48-
| `rotationSpeed` | `0.1` | Rotation speed |
49-
| `showLines` | `true` | Show/hide meshes between particles (icons) |
50-
| `minDistance` | `150` | Minimum distance to create meshes connecting particles |
51-
| `maxConnections` | `20` | Maximum number of connections |
52-
| `particleVelocity` | `0.1` | Velocity of particles |
53-
| `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 |
54-
| `availableColors []` | `['#b02727', '#454545','#15154c']` | Available colors for meshes |
55-
| `enableCameraControls` | `true` | Enable/disable the ability to rotate and resize the sphere |
57+
| Name | Default | Description |
58+
|------------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
59+
| `enableRotation` | `false` | Enable/disable sphere rotation |
60+
| `rotationSpeed` | `0.1` | Rotation speed |
61+
| `showLines` | `true` | Show/hide meshes between particles (icons) |
62+
| `minDistance` | `150` | Minimum distance to create meshes connecting particles |
63+
| `maxConnections` | `20` | Maximum number of connections |
64+
| `particleVelocity` | `0.1` | Velocity of particles |
65+
| `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 |
66+
| `availableColors []` | `['#b02727', '#454545','#15154c']` | Available colors for meshes |
67+
| `enableCameraControls` | `true` | Enable/disable the ability to rotate and resize the sphere |
5668

5769
<h3>Camera Settings:</h3>
5870

59-
| Name | Default | Description |
60-
|------------------|---------|---------------------------------------------------------------------------|
61-
| `positionZ` | `1750` | Initial position of the sphere by Z coordinates |
62-
| `farPlane` | `4000` | The farthest distance that can be obtained by resizing a sphere |
63-
| `nearPlane` | `1` | Minimum distance from the camera at which objects begin to be displayed |
64-
| `fieldOfView` | `45` | Maximum distance from the camera at which objects will still be displayed |
71+
| Name | Default | Description |
72+
|---------------|---------|---------------------------------------------------------------------------|
73+
| `positionZ` | `1750` | Initial position of the sphere by Z coordinates |
74+
| `farPlane` | `4000` | The farthest distance that can be obtained by resizing a sphere |
75+
| `nearPlane` | `1` | Minimum distance from the camera at which objects begin to be displayed |
76+
| `fieldOfView` | `45` | Maximum distance from the camera at which objects will still be displayed |
6577

6678
<h3>Orbit Controls Settings:</h3>
6779

@@ -72,12 +84,12 @@ Below is a description of the settings.
7284

7385
<h3>Scene Settings:</h3>
7486

75-
| Name | Default | Description |
76-
|---------------------|-----------|----------------------------------------|
77-
| `halfRadius` | `400` | Radius value for constructing a sphere |
78-
| `iconSize` | `20` | Icons size |
79-
| `particlesCount` | `500` | Number of particles |
80-
| `maxParticlesCount` | `1000` | Maximum number of particles |
87+
| Name | Default | Description |
88+
|---------------------|---------|----------------------------------------|
89+
| `halfRadius` | `400` | Radius value for constructing a sphere |
90+
| `iconSize` | `20` | Icons size |
91+
| `particlesCount` | `500` | Number of particles |
92+
| `maxParticlesCount` | `1000` | Maximum number of particles |
8193

8294
<h2>Credits</h2>
8395
It is mainly developed using the JavaScript 3D library <a href="https://github.com/mrdoob/three.js">three.js</a>.

0 commit comments

Comments
 (0)