{"id":19713106,"url":"https://github.com/zz85/threejs-path-flow","last_synced_at":"2025-04-29T18:31:03.039Z","repository":{"id":37385201,"uuid":"124107347","full_name":"zz85/threejs-path-flow","owner":"zz85","description":"🐬🐟 ↶Mesh Deformation / Bending / Following on a Curve ","archived":false,"fork":false,"pushed_at":"2018-03-28T10:52:33.000Z","size":525,"stargazers_count":320,"open_issues_count":0,"forks_count":36,"subscribers_count":9,"default_branch":"gh-pages","last_synced_at":"2025-04-05T18:52:07.313Z","etag":null,"topics":["bend","curve","curve-modifier","deformation","flow","frenet-frames","tangent","texture","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://zz85.github.io/threejs-path-flow/flow.html","language":"JavaScript","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/zz85.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}},"created_at":"2018-03-06T16:37:27.000Z","updated_at":"2025-03-30T20:59:44.000Z","dependencies_parsed_at":"2022-08-10T00:30:15.092Z","dependency_job_id":null,"html_url":"https://github.com/zz85/threejs-path-flow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zz85%2Fthreejs-path-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zz85%2Fthreejs-path-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zz85%2Fthreejs-path-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zz85%2Fthreejs-path-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zz85","download_url":"https://codeload.github.com/zz85/threejs-path-flow/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251559827,"owners_count":21609082,"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":["bend","curve","curve-modifier","deformation","flow","frenet-frames","tangent","texture","threejs","webgl"],"created_at":"2024-11-11T22:19:36.831Z","updated_at":"2025-04-29T18:31:02.511Z","avatar_url":"https://github.com/zz85.png","language":"JavaScript","readme":"# Path Flow aka Mesh Path Deformation Modifier\n\n## About\n\nIt is called by different names (eg. \"Curve Modifier\" in Blender, Path-based Deformation, Bend Modifier), but what this does is that it can take a mesh and bends it along a curve or a path.\n\nIt's quite a work in progress ~~and renders only in wireframe now~~.\n\nFeel free to hack the code.\n\n![flow-path-3](https://user-images.githubusercontent.com/314997/37237344-faf19dac-244c-11e8-9bca-42c431e5f3f3.gif)\n\n### Examples\n\n[Flow](https://zz85.github.io/threejs-path-flow/flow.html) - Allow a mesh to follow and bends along a path\n\n[Bend](https://zz85.github.io/threejs-path-flow/bend.html) - Bend a mesh along another curve\n\n### Links\n\nCredits: Killer Whale Orca 3D Model - [https://free3d.com/3d-model/killer-whale-89887.html](https://free3d.com/3d-model/killer-whale-89887.html)\n\n[three.js issue](https://github.com/mrdoob/three.js/issues/13553)\n\n\n### Technical details\n\nPath positions and Frenet Frames (containing tangents, normals and binormals) are generated using three.js Curve class.\n\nThese are stored in a DataTexture in 4 rows.\n\nThe vertex shader reads the texture, based on its offset transforms the geometry position.\n\n(More to come)\n\n### Features\n\n- Bend vertex calculations\n- Minimizing twisting effect (Frenet frames)\n- Equi-distance sampling of points (From Curve)\n- Flow - Bend/Rigid option\n- OBJ file loading (via Drag and drop)\n\n### TODO\n\n- [ ] ~~Add Sharks~~ Multi-model\n- [ ] Granny Knot animation\n- [ ] Add OBJ texture support\n- [ ] Add follow cursor\n- [ ] Make flow a parameter\n- [ ] Shading\n- [x] [Gif Support](https://github.com/jnordberg/gif.js/)\n- [ ] Better rotation/transform controls\n\n### Context\n\nYou can find the full story in [this tweet](https://twitter.com/BlurSpline/status/966114594065326080).\n\nBasically I saw that @leon196 had built [a curve modifier for Unity3D](https://github.com/leon196/CurveModifier) and I thought there was no reason it cannot be done in js/web/threejs too.\n\nThe idea on how to do it was to apply some of the knowledge I already knew.\n\nI first tried \"bending\" stuff writing TextGeometry in three.js.\n(That eventually got removed due to complexity but the process build several of the foundation, eg. get tangents, spaced points etc).\n\nDiscovering and learning about calculating frenent frames was also important (writing tubes / extrude geometry)\nhttps://github.com/mrdoob/three.js/issues/905\n\nThe most useful article I read about doing so was from prideout's blog post. http://prideout.net/blog/?p=56\n\nNext steps was the usual - looking into threejs examples and picking up what could be used.\nIn this case, picking off the Spline Editor and Obj Loader examples.\n\nThanks to [@mrdoob](https://twitter.com/mrdoob) and [@thespite](https://twitter.com/thespite) for enouraging me to try this as usual.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzz85%2Fthreejs-path-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzz85%2Fthreejs-path-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzz85%2Fthreejs-path-flow/lists"}