{"id":25164419,"url":"https://github.com/a-rudenko/webgl-tech-particles","last_synced_at":"2025-04-03T15:47:39.352Z","repository":{"id":274211831,"uuid":"920264702","full_name":"a-rudenko/webgl-tech-particles","owner":"a-rudenko","description":"Interactive 3D particle system with technology icons using WebGL and Three.js.","archived":false,"fork":false,"pushed_at":"2025-02-23T21:04:07.000Z","size":1224,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T22:18:48.189Z","etag":null,"topics":["3d","animation","javascript","particles-animations","technologies","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://a-rudenko.github.io/webgl-tech-particles/demo.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a-rudenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-21T21:03:28.000Z","updated_at":"2025-02-23T21:04:10.000Z","dependencies_parsed_at":"2025-02-23T22:18:35.872Z","dependency_job_id":"65767be6-5a34-487c-b11e-327051581358","html_url":"https://github.com/a-rudenko/webgl-tech-particles","commit_stats":null,"previous_names":["a-rudenko/webgl-tech-particles"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-rudenko%2Fwebgl-tech-particles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-rudenko%2Fwebgl-tech-particles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-rudenko%2Fwebgl-tech-particles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-rudenko%2Fwebgl-tech-particles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-rudenko","download_url":"https://codeload.github.com/a-rudenko/webgl-tech-particles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246620262,"owners_count":20806722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","animation","javascript","particles-animations","technologies","threejs","webgl"],"created_at":"2025-02-09T04:30:34.458Z","updated_at":"2025-04-03T15:47:39.345Z","avatar_url":"https://github.com/a-rudenko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eWebGL Tech Particles\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/a-rudenko/webgl-tech-particles/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/a-rudenko/webgl-tech-particles\" alt=\"GitHub license\" \u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/webgl-tech-particles\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/webgl-tech-particles\" alt=\"Latest version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/webgl-tech-particles\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/min/webgl-tech-particles\" alt=\"Minified size\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/webgl-tech-particles\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dw/webgl-tech-particles\" alt=\"npm\" \u003e\n  \u003c/a\u003e\n\u003cimg src=\"https://github.com/a-rudenko/webgl-tech-particles/actions/workflows/deploy.yml/badge.svg\" alt=\"deploy demo\" \u003e\n\u003c/div\u003e\n\nInteractive 3D particle system with technology icons using WebGL and Three.js.\n\nThis project is an interactive 3D visualization of technology icons (e.g., JavaScript, Python, React, Docker, etc.)\nimplemented with WebGL and Three.js. Particles representing different technologies move dynamically in a 3D space,\nconnecting with each other based on customizable parameters.\n\n\u003ca href=\"https://a-rudenko.github.io/webgl-tech-particles/demo.html\"\u003eLive demo\u003c/a\u003e\n\n\u003ch2\u003eInstall\u003c/h2\u003e\n\nUsing npm:\n\n```bash\nnpm i webgl-tech-particles\n```\n\n\u003ch2\u003eUsage\u003c/h2\u003e\n\n```js\nimport {initWebGLTechParticles} from 'webgl-tech-particles';\n\ninitWebGLTechParticles('tech-particles');\n```\n\nTo apply your custom settings, you need to specify the path to `settings.json` as the second parameter\nin `initWebGLTechParticles`:\n\n```js\nimport {initWebGLTechParticles} from 'webgl-tech-particles';\n\ninitWebGLTechParticles('tech-particles', 'settings.json');\n```\n\nIf you want to use a custom icon set, you need to specify the path to the icon folder in your `settings.json`:\n\n```\n\"iconFolderPath\": \"icons\"\n```\n\nAlso in the icon folder you need to create a file `iconList.json` and specify which icons to load.\n\nExample of `iconList.json`:\n\n```\n[\n    \"vue.webp\",\n    \"react.webp\",\n    \"dart.webp\",\n    \"rust.webp\",\n    \"aws.webp\"\n]\n```\n\n\u003ci\u003eFor correct operation, it is better to upload small icons in png and webp formats.\u003c/i\u003e\n\n\u003ch2\u003eCDN Usage\u003c/h2\u003e\n\nYou 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:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { initWebGLTechParticles } from 'https://cdn.jsdelivr.net/npm/webgl-tech-particles@:vesrion/dist/webgl-tech-particles.js';\n  initWebGLTechParticles('tech-particles', 'settings.json');\n\u003c/script\u003e\n```\n\n\u003ci\u003eReplace `:vesrion` with the version you need\u003c/i\u003e\n\n\u003ch2\u003eSettings\u003c/h2\u003e\n\nExample with basic \u003ca href=\"https://github.com/a-rudenko/webgl-tech-particles/blob/main/settings.json\"\u003e\nsettings\u003c/a\u003e.\n\n\u003ci\u003eYou can also export settings from the \u003ca href=\"https://a-rudenko.github.io/webgl-tech-particles/demo.html\"\u003edemo\u003c/a\u003e version.\u003c/i\u003e\n\nBelow is a description of the settings.\n\n\u003ch3\u003eParticle Settings:\u003c/h3\u003e\n\n| Name                   | Default                            | Description                                                                                                                 |\n|------------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|\n| `enableRotation`       | `false`                            | Enable/disable sphere rotation                                                                                              |\n| `rotationSpeed`        | `0.1`                              | Rotation speed                                                                                                              |\n| `showLines`            | `true`                             | Show/hide meshes between particles (icons)                                                                                  |\n| `minDistance`          | `150`                              | Minimum distance to create meshes connecting particles                                                                      |\n| `maxConnections`       | `20`                               | Maximum number of connections                                                                                               |\n| `particleVelocity`     | `0.1`                              | Velocity of particles                                                                                                       |\n| `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 |\n| `availableColors []`   | `['#b02727', '#454545','#15154c']` | Available colors for meshes                                                                                                 |\n| `enableCameraControls` | `true`                             | Enable/disable the ability to rotate and resize the sphere                                                                  |\n\n\u003ch3\u003eCamera Settings:\u003c/h3\u003e\n\n| Name          | Default | Description                                                               |\n|---------------|---------|---------------------------------------------------------------------------|\n| `positionZ`   | `1750`  | Initial position of the sphere by Z coordinates                           |\n| `farPlane`    | `4000`  | The farthest distance that can be obtained by resizing a sphere           |\n| `nearPlane`   | `1`     | Minimum distance from the camera at which objects begin to be displayed   |\n| `fieldOfView` | `45`    | Maximum distance from the camera at which objects will still be displayed |\n\n\u003ch3\u003eOrbit Controls Settings:\u003c/h3\u003e\n\n| Name          | Default | Description                                                     |\n|---------------|---------|-----------------------------------------------------------------|\n| `minDistance` | `1000`  | Minimum distance the camera can get to the target (focus point) |\n| `maxDistance` | `3000`  | Maximum distance the camera can get to the target (focus point) |\n\n\u003ch3\u003eScene Settings:\u003c/h3\u003e\n\n| Name                | Default | Description                            |\n|---------------------|---------|----------------------------------------|\n| `halfRadius`        | `400`   | Radius value for constructing a sphere |\n| `iconSize`          | `20`    | Icons size                             |\n| `particlesCount`    | `500`   | Number of particles                    |\n| `maxParticlesCount` | `1000`  | Maximum number of particles            |\n\n\u003ch2\u003eCredits\u003c/h2\u003e\nIt is mainly developed using the JavaScript 3D library \u003ca href=\"https://github.com/mrdoob/three.js\"\u003ethree.js\u003c/a\u003e.\n\n\u003ch2\u003eLicense\u003c/h2\u003e\n\u003ca href=\"https://github.com/a-rudenko/webgl-tech-particles/blob/main/LICENSE\"\u003eMIT\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-rudenko%2Fwebgl-tech-particles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-rudenko%2Fwebgl-tech-particles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-rudenko%2Fwebgl-tech-particles/lists"}