{"id":13438212,"url":"https://github.com/drawcall/threejs-mesh-modifiers","last_synced_at":"2025-04-05T11:08:31.027Z","repository":{"id":41414084,"uuid":"85393582","full_name":"drawcall/threejs-mesh-modifiers","owner":"drawcall","description":"A Three.js mesh morph modifier","archived":false,"fork":false,"pushed_at":"2021-09-15T13:06:48.000Z","size":25790,"stargazers_count":332,"open_issues_count":4,"forks_count":37,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-29T10:08:42.603Z","etag":null,"topics":["modifier","three-modifier","threejs"],"latest_commit_sha":null,"homepage":"https://drawcall.github.io/threejs-mesh-modifiers/","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/drawcall.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":"2017-03-18T10:36:54.000Z","updated_at":"2025-03-26T14:18:41.000Z","dependencies_parsed_at":"2022-09-24T09:02:39.988Z","dependency_job_id":null,"html_url":"https://github.com/drawcall/threejs-mesh-modifiers","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2Fthreejs-mesh-modifiers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2Fthreejs-mesh-modifiers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2Fthreejs-mesh-modifiers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2Fthreejs-mesh-modifiers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drawcall","download_url":"https://codeload.github.com/drawcall/threejs-mesh-modifiers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325693,"owners_count":20920714,"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":["modifier","three-modifier","threejs"],"created_at":"2024-07-31T03:01:03.723Z","updated_at":"2025-04-05T11:08:31.012Z","avatar_url":"https://github.com/drawcall.png","language":"JavaScript","readme":"## Threejs mesh modifiers\n\nA Three.js mesh morph modifier, including nearly ten modifiers, such as Bend, Bloat, Noise, Skew and Taper, etc. It is very lightweight and simple to use, using it can give you unexpected results.\n\n\u003e Note: The latest version uses BufferGeometry to calculate, because three.js [removes THREE.Geometry](https://discourse.threejs.org/t/three-geometry-will-be-removed-from-core-with-r125/22401/2). If you are using a version earlier than three.js r125, please use three.modifiers v2.2.3 \n\n```shell\nnpm install three three.modifiers --save\n```\n\n## Demo\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codesandbox.io/s/three-mesh-modifiers-website-b55p6?file=/src/components/Photo.js\"\u003e\u003cimg width=\"412\" src=\"https://github.com/drawcall/threejs-mesh-modifiers/blob/master/example/images/thumb/04-min.gif?raw=true\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/three-mesh-modifiers-demo2-61b7o?file=/src/components/Modifier.js\"\u003e\u003cimg width=\"412\" src=\"https://github.com/drawcall/threejs-mesh-modifiers/blob/master/example/images/thumb/03-min.gif?raw=true\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://drawcall.github.io/threejs-mesh-modifiers/example/demo1.html\"\u003e\u003cimg width=\"412\" src=\"https://github.com/drawcall/threejs-mesh-modifiers/blob/master/example/images/thumb/01-min.gif?raw=true\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://drawcall.github.io/threejs-mesh-modifiers/example/demo2.html\"\u003e\u003cimg width=\"412\" src=\"https://github.com/drawcall/threejs-mesh-modifiers/blob/master/example/images/thumb/02-min.gif?raw=true\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"middle\"\u003e\n  \u003ci\u003eThese demos are real, you can click them! They contain the full code, too.\u003c/i\u003e\n\u003c/p\u003e\n\n## Modifiers\n\n- Bend – bends on object along an axis\n- Bloat – Bloats the mesh by forcing vertices out of specified sphere\n- Break\n- Cloth - displaces object vertices giving the effects of wind and gravity.\n- Noise – deforms an object in a random manner\n- Pivot - Pivot is a modifier that changes an object's pivot point.\n- Skew – skews an object along one or more axes\n- Taper - displaces object vertices on two axes in proportion to their position on the third axis.\n- Twist – twists the mesh around it’s center point\n- Wheel\n- UserDefined - the custom modifier\n\n## Installing\n\n#### Insert script\n\nDownload the build at `dist/modifiers.min.js` and include it as a script tag in a web page. You must include `three.js` as well.\n\n```javascript\n\u003cscript src=\"./js/three.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./js/modifiers.min.js\"\u003e\u003c/script\u003e\n```\n\n#### Use npm package\n\nNote you must also have `three` installed via npm.\n\n```javascript\nimport * as THREE from \"three\";\nimport {\n  ModifierStack,\n  Twist,\n  Noise,\n  Cloth,\n  UserDefined,\n  Taper,\n  Break,\n  Bloat,\n  Vector3,\n  ModConstant\n} from \"three.modifiers\";\n```\n\n## Usage\n\n```javascript\nconst modifier = new ModifierStack(mesh);\n\nconst bend = new Bend(1.5, 0.2, 0);\nbend.constraint = ModConstant.LEFT;\n\nconst cloth = new Cloth(1, 0);\ncloth.setForce(0.2, -0.2, -0.2);\n\nconst twist = new Twist(0);\ntwist.vector = new Vector3(0, 1, 0);\n\nconst taper = new Taper(1);\ntaper.setFalloff(0.1, 0.5);\n\nmodifier.addModifier(bend);\nmodifier.addModifier(cloth);\nmodifier.addModifier(twist);\nmodifier.addModifier(taper);\n\n// animate func\nfunction animate() {\n  requestAnimationFrame(animate);\n  renderer.render(scene, camera);\n  // modifier.apply\n  modifier \u0026\u0026 modifier.apply();\n}\n```\n\n## Document\n\nIt is the typescript version of the [ActionScript](https://en.wikipedia.org/wiki/ActionScript) engine [AS3Dmod](https://code.google.com/archive/p/as3dmod/). You can find the documentation here.\n\n- [https://code.google.com/archive/p/as3dmod/wikis/AS3Dmod_Tutorial.wiki](https://code.google.com/archive/p/as3dmod/wikis/AS3Dmod_Tutorial.wiki)\n- [http://osbo.com/as3dmod/bend/#instructions](http://osbo.com/as3dmod/bend/#instructions)\n\n## Development and Build\n\n```shell\n// DEVELOPMENT MODE\nnpm install\nnpm run demo\n// (vist http://localhost:8888/)\n\n// PRODUCTION MODE\nnpm run build\n```\n\n## License\n\nThis library is under the [BSD](https://opensource.org/licenses/BSD-3-Clause) License.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawcall%2Fthreejs-mesh-modifiers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrawcall%2Fthreejs-mesh-modifiers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawcall%2Fthreejs-mesh-modifiers/lists"}