{"id":18020040,"url":"https://github.com/polygonjs/polygonjs-threejs-example-particles","last_synced_at":"2026-02-08T08:09:10.075Z","repository":{"id":109051190,"uuid":"486154413","full_name":"polygonjs/polygonjs-threejs-example-particles","owner":"polygonjs","description":"Example showing how to combine a Polygonjs scene that simulates particles with a Threejs scene","archived":false,"fork":false,"pushed_at":"2022-11-09T12:37:00.000Z","size":94,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-01-14T20:16:52.107Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"GLSL","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/polygonjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-04-27T10:54:59.000Z","updated_at":"2022-10-24T11:29:47.000Z","dependencies_parsed_at":"2023-03-13T14:19:11.739Z","dependency_job_id":null,"html_url":"https://github.com/polygonjs/polygonjs-threejs-example-particles","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"1e43ef890c9d2056ac9bbb6f43d3d59393caeec3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/polygonjs/polygonjs-threejs-example-particles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-threejs-example-particles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-threejs-example-particles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-threejs-example-particles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-threejs-example-particles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polygonjs","download_url":"https://codeload.github.com/polygonjs/polygonjs-threejs-example-particles/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs-threejs-example-particles/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29225178,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T06:05:31.539Z","status":"ssl_error","status_checked_at":"2026-02-08T05:58:33.853Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-30T05:13:23.254Z","updated_at":"2026-02-08T08:09:10.045Z","avatar_url":"https://github.com/polygonjs.png","language":"GLSL","funding_links":[],"categories":[],"sub_categories":[],"readme":"\nThis repository is a continuation to the [tutorial](https://polygonjs.com/docs/integrations/threejs) showing how to integrate Polygonjs and Threejs scenes together. You can also look at the [repository](https://github.com/polygonjs/polygonjs-threejs-example) of that tutorial.\n\nHere we show how to integrate Polygonjs scenes which contain **particles system**.\n\nThe main difference with particle system is that they require a WebGLRenderer to function. When you use a Polygonjs scene on its own, you would view it with its [viewer](https://polygonjs.com/docs/api/TypedViewer). The viewer mostly takes care of rendering the scene to the screen, but it is also useful to other scene objects like the particles, as they need to render things off screen, in order to run the simulation.\n\n## Recommended approach: Use Polygonjs Viewer\n\nSo, to make things as easy as possible, it is recommended that you create a viewer. In order to do that, all you need is to change the call \n\n```\nconst loadedData = await loadScene_scene_01();\n```\n\nto:\n\n```\nconst loadedData = await loadScene_scene_01({\n  domElement: 'app'\n});\n```\n\nThis will create a viewer for you, mount it on the element 'app', and you will then see the particles.\n\nFrom then, you can simply add your threejs scene into the Polygonjs one, as shown in the [previous tutorial](https://polygonjs.com/docs/integrations/threejs).\n\n## Other approach: Use Threejs Renderer\n\nBut if you need to use your own threejs WebGLRenderer, you need to tell Polygonjs that this renderer is available. And this is done like this:\n\n```\nloadedData.scene.registerRenderer(renderer);\n```\n\nThis will allow the particles to simulate as expected.\n\nBut there is still one caveat. Just like we saw in the [previous tutorial](https://polygonjs.com/docs/integrations/threejs), some events - like mouse and keyboard events - are handled by the viewer. So if you need to simulate particles that follow your mouse for instance, this will not work. This is one of the reasons why the first approach is recommended.\n\n\n# Open app\n\nInstall dependencies: `yarn` or `npm run install`\n\nStart App: `yarn dev` or `npm run dev`\n\n# Open Polygonjs Editor\n\n- 1: install dependencies, with `yarn` or `npm install`\n- 2: run: `yarn polygon` or `npm run polygon`\n- 3: open your browser on `http://localhost:8091`\n\nIf you have any trouble installing it, the docs may be able to help: [https://polygonjs.com/docs/](https://polygonjs.com/docs/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs-threejs-example-particles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolygonjs%2Fpolygonjs-threejs-example-particles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs-threejs-example-particles/lists"}