{"id":16579507,"url":"https://github.com/mkkellogg/trailrendererjs","last_synced_at":"2025-06-21T16:40:41.102Z","repository":{"id":48697300,"uuid":"48530320","full_name":"mkkellogg/TrailRendererJS","owner":"mkkellogg","description":"3D object trail renderer for Three.js","archived":false,"fork":false,"pushed_at":"2024-06-10T03:44:26.000Z","size":1051,"stargazers_count":180,"open_issues_count":2,"forks_count":30,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-09T00:02:13.947Z","etag":null,"topics":["threejs","trail","trailrenderer","webgl"],"latest_commit_sha":null,"homepage":"","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/mkkellogg.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-24T07:10:11.000Z","updated_at":"2025-03-24T14:33:21.000Z","dependencies_parsed_at":"2024-06-10T04:40:52.999Z","dependency_job_id":"b1112c9c-f202-48a6-8d15-7c56027c16e6","html_url":"https://github.com/mkkellogg/TrailRendererJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mkkellogg/TrailRendererJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkkellogg%2FTrailRendererJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkkellogg%2FTrailRendererJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkkellogg%2FTrailRendererJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkkellogg%2FTrailRendererJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mkkellogg","download_url":"https://codeload.github.com/mkkellogg/TrailRendererJS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkkellogg%2FTrailRendererJS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261160514,"owners_count":23118183,"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":["threejs","trail","trailrenderer","webgl"],"created_at":"2024-10-11T22:18:13.064Z","updated_at":"2025-06-21T16:40:36.090Z","avatar_url":"https://github.com/mkkellogg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Three.js Trail Renderer\n\nBasic trail renderer for Three.js. This library allows for the straight-forward attachment of motion trails to any 3D object. The programmer simply has to specify the shape of the trail and its target (the target must be a Three.js Object3D instance). The update of the trail is handled automatically by the library. \n\nThe shape of the trail is specified by supplying a list of 3D points. These points make up the local-space head of the trail. During the update phase for the trail, a new instance of the head is created by transforming the local points into world-space using the target Object3D instance's local-to-world transformation matrix. These points are then connected to the existing head of the trail to extend the trail's geometry. \n\nThe trail renderer currently supports both textured and non-textured trails. Non-textured trails work well with many trail shapes in both translucent and opaque modes. Textured trails work well with many shapes as long as the trail is opaque; if the trail is not opaque, flat shapes work best. \n\nDemo of the effect can be seen [here](http://projects.markkellogg.org/threejs/demo_trail_renderer.php)\n\nThe following code shows how to attach a trail renderer in a scene named 'scene' to an existing Object3D instance named 'trailTarget'.\n\n```javascript\n// specify points to create planar trail-head geometry\nconst trailHeadGeometry = [];\ntrailHeadGeometry.push( \n  new THREE.Vector3( -10.0, 0.0, 0.0 ), \n  new THREE.Vector3( 0.0, 0.0, 0.0 ), \n  new THREE.Vector3( 10.0, 0.0, 0.0 ) \n);\n\n// create the trail renderer object\nconst trail = new TrailRenderer( scene, false );\n\n// set how often a new trail node will be added and existing nodes will be updated\ntrail.setAdvanceFrequency(30);\n\n// create material for the trail renderer\nconst trailMaterial = TrailRenderer.createBaseMaterial();\t\n\n// specify length of trail\nconst trailLength = 150;\n\n// initialize the trail\ntrail.initialize( trailMaterial, trailLength, false, 0, trailHeadGeometry, trailTarget );\n\n// activate the trail\ntrail.activate();\n\nfunction animate() {\n    requestAnimationFrame( animate );\n    trail.update();\n    render();\n \n}\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkkellogg%2Ftrailrendererjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkkellogg%2Ftrailrendererjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkkellogg%2Ftrailrendererjs/lists"}