{"id":15674307,"url":"https://github.com/kfarr/aframe-gltf-helpers","last_synced_at":"2025-05-06T22:55:06.363Z","repository":{"id":57174172,"uuid":"286597719","full_name":"kfarr/aframe-gltf-helpers","owner":"kfarr","description":"Some helpful glTF components for A-Frame","archived":false,"fork":false,"pushed_at":"2023-01-18T06:37:16.000Z","size":6487,"stargazers_count":14,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-06T22:54:52.330Z","etag":null,"topics":["a-frame","aframe","aframe-gltf-helpers","draco-compression","gltf"],"latest_commit_sha":null,"homepage":"https://kfarr.github.io/aframe-gltf-helpers/","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/kfarr.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}},"created_at":"2020-08-10T23:17:21.000Z","updated_at":"2024-06-09T13:01:51.000Z","dependencies_parsed_at":"2023-02-10T13:31:48.732Z","dependency_job_id":null,"html_url":"https://github.com/kfarr/aframe-gltf-helpers","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kfarr%2Faframe-gltf-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kfarr%2Faframe-gltf-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kfarr%2Faframe-gltf-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kfarr%2Faframe-gltf-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kfarr","download_url":"https://codeload.github.com/kfarr/aframe-gltf-helpers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252782479,"owners_count":21803382,"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":["a-frame","aframe","aframe-gltf-helpers","draco-compression","gltf"],"created_at":"2024-10-03T15:44:01.758Z","updated_at":"2025-05-06T22:55:06.344Z","avatar_url":"https://github.com/kfarr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# aframe-gltf-helpers\n\n![image](https://user-images.githubusercontent.com/470477/213101219-02bb88e8-871b-4009-b685-a8f71212907c.jpg)\n\u003e :warning: **NOT SUPER GREAT**: this repo was used for learning so you probably don't want to depend on it\n\n[![Version](http://img.shields.io/npm/v/aframe-gltf-helpers.svg?style=flat-square)](https://npmjs.org/package/aframe-gltf-helpers)\n[![License](http://img.shields.io/npm/l/aframe-gltf-helpers.svg?style=flat-square?cachebust=true)](https://npmjs.org/package/aframe-gltf-helpers)\n\n[A-Frame](https://aframe.io) glTF Helper Components\n\n`gltf-part-plus` component adds a few features to the original [gltf-part component](https://github.com/supermedium/superframe/tree/master/components/gltf-part) made by [@ngokevin](github.com/ngokevin), namely: draco compression and ability to extract gltf translation to the A-Frame scene graph. Note: to enable draco decompression, [refer to A-Frame instructions here](https://aframe.io/docs/1.0.0/components/gltf-model.html#geometry-compression-with-draco), also shown in examples 3 and 4 below.\n\n`model-center` component centers the geometry of a mesh loaded from gltf-part-plus with an option to bottom align at ground level, useful for buildings, trees, etc.\n\nThese are part of an experimental glTF workflow for handling assets related to [Streetmix3D](https://github.com/kfarr/streetmix3d). See below for more info on the full workflow.\n\n## API\n\n### gltf-part-plus\n| Property | Description | Default Value |\n| -------- | -----------                                                                                                                        | ------------- |\n| buffer   | Whether to load the geometry as a BufferGeometry (versus Geometry). Set to `false` if we need access to vertices, faces, UVs, etc. | true          |\n| part     | Name of the part to look for specified in the glTF file as `name=\"\u003cNAME\u003e\"`.                                                       | ''            |\n| src      | Path to the glTF file (or selector to `\u003ca-asset-item\u003e`).                                                                           | ''            |\n| resetPosition | For the first gltf node encountered in the matching `part`, copy its translation to the a-frame entity, and then set gltf translation to `0 0 0`. This keeps the same world position for the placed gltf `part`'s first node, while giving the A-Frame entity the value of that part from the gltf scene. However, this only works for a simple gltf with only 1 child node for each `part` in the scene. (Use with caution, this is not a well-tested property and [might not work as expected](https://github.com/kfarr/aframe-gltf-helpers/issues/1) on your model.) | false |\n\n### model-center\n[Center](https://threejs.org/docs/#api/en/core/Geometry.center) the child geometry of the current entity's object3d.\n| Property | Description | Default Value |\n| -------- | -----------                                                                                                                        | ------------- |\n| bottomAlign   | Whether to align the bottom of the centered mesh geometry with the ground or floor level (at `y=0`), useful for buildings, trees or other set dressings | false |\n\n### anisotropy\nTraverse through materials in a glTF model to set anisotropic filtering value. This component only accepts one optional number value.\n| Attribute Type | Description | Default Value |\n| -------- | -----------                                                                                                                        | ------------- |\n| `number`   | Desired [anisotropy value](https://threejs.org/docs/#api/en/textures/Texture.anisotropy) for all texture maps found while traversing the model. Setting to 0 (default) will set the value to the maximum value supported by hardware. | 0 |\n\n\n## Examples\nFor each example, press `\u003cctrl\u003e + \u003calt\u003e + \u003ci\u003e` once scene is loaded to inspect individual gltf-part entities as a \"manual test\".\n\n### [CLICK FOR ONLINE EXAMPLES \u003cimg src=\"./examples/screenshots/examples.jpg\" /\u003e](https://kfarr.github.io/aframe-gltf-helpers/)\n\n\n### Installation\n\n#### Browser\n\nInstall and use by directly including the [browser files](dist):\n\n```html\n\u003chead\u003e\n  \u003ctitle\u003eMy A-Frame Scene\u003c/title\u003e\n  \u003cscript src=\"https://aframe.io/releases/1.2.0/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/aframe-gltf-helpers@0.0.5/dist/aframe-gltf-helpers.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003ca-scene\u003e\n    \u003ca-entity gltf-part-plus=\"src: #draco-buildings-model; part: SM3D_Bld_Mixed_Corner_4fl;\" model-center anisotropy\u003e\u003c/a-entity\u003e\n  \u003c/a-scene\u003e\n\u003c/body\u003e\n```\n\n#### npm\n\nInstall via npm:\n\n```bash\nnpm install aframe-gltf-helpers\n```\n\nThen require and use.\n\n```js\nrequire('aframe');\nrequire('aframe-gltf-helpers');\n```\n\n### About the Example Models\n* The [cubes.gltf model](https://github.com/kfarr/aframe-gltf-helpers/blob/master/examples/cubes.gltf) has 3 cubes translated to arbitrary locations within a few units of 0 0 0 with no rotation. MIT License.\n* The [buildings.glb model](https://github.com/kfarr/aframe-gltf-helpers/blob/master/examples/buildings.glb) has 5 buildings with \"applied\" custom translations applied in Blender, then exported as a glb with draco compression. The buildings are paid models from the [Synty Polygon City Pack](https://syntystore.com/products/polygon-city-pack) for use in Streetmix3D and are for testing only. Please purchase a license for $19.99 from them if you use these models in your own projects.\n* [Meshopt gltf pack](https://github.com/zeux/meshoptimizer/blob/master/gltf/README.md) output of the same buildings model as 3 files:\n`gltfpack -kn -i ./scenesmall3.gltf -o buildings-gltfpackkn.glb`\n`gltfpack -c -kn -i ./scenesmall3.gltf -o buildings-gltfpackckn.glb`\n`gltfpack -cc -kn -i ./scenesmall3.gltf -o buildings-gltfpack-cc-kn.glb`\n* [New Flyer XD40 Bus Model](https://github.com/kfarr/aframe-gltf-helpers/blob/master/examples/XD40.glb) Credits: [New Flyer XD40 Bus](https://sketchfab.com/3d-models/new-flyer-xd40-d61e475543324d21aa24b2b208fbf3c5) |\n\n### About the Workflow\nThese are part of an experimental glTF workflow for handling assets related to [Streetmix3D](https://github.com/kfarr/streetmix3d). \n\nThe current workflow is roughly:\n- \"Main\" Blender file for a collection of models that share the same material such as \"urban buildings\", \"suburban buildings\", \"plants and trees\", \"vehicles\", etc. (Only 1 material keep things simple at first, future support for more.)\n- Export to a gltf with separate bin and image files (some separate gltf files may share the same image, I don't see a need to combine to one glb). Enable Draco mesh compression.\n- Use this repo's `gltf-part-plus` component to load part from draco compressed file.\n\nAlternate workflow (not working):\n- Use the Main Blender file to export a gltf *without* draco compression.\n- Use [meshopt gltfpack](https://github.com/zeux/meshoptimizer/blob/master/gltf/README.md) with compression such as `gltfpack -cc -kn -i ./scenesmall3.gltf -o buildings-gltfpack-cc-kn.glb` to optimize and compress\n- Or use [meshopt gltfpack](https://github.com/zeux/meshoptimizer/blob/master/gltf/README.md) *without* such as `gltfpack -kn -i ./scenesmall3.gltf -o buildings-gltfpack-kn.glb` and serve with a web host that automatically gzip compresses ([not github pages](https://github.community/t/support-for-gzip-on-glb-3d-model-files/11004) at the moment)\n\n### Wishlist\n\nI'd like to add:\n* ability to support meshopt gltfpack with -c option, similar in spirit to draco support\n* automated testing for each example\n* instancing\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkfarr%2Faframe-gltf-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkfarr%2Faframe-gltf-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkfarr%2Faframe-gltf-helpers/lists"}