{"id":18653048,"url":"https://github.com/wnayes/gltf-js-utils","last_synced_at":"2025-09-02T10:31:52.617Z","repository":{"id":29236154,"uuid":"116329511","full_name":"wnayes/glTF-js-utils","owner":"wnayes","description":"Helper library for creating glTF 2.0 models with JavaScript.","archived":false,"fork":false,"pushed_at":"2024-06-29T20:14:36.000Z","size":801,"stargazers_count":63,"open_issues_count":3,"forks_count":19,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-08-27T05:36:16.839Z","etag":null,"topics":["3d-models","gltf2","javascript"],"latest_commit_sha":null,"homepage":"","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/wnayes.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-05T02:14:14.000Z","updated_at":"2025-06-15T12:38:54.000Z","dependencies_parsed_at":"2024-01-17T02:46:02.660Z","dependency_job_id":"df97620e-2224-4766-9481-2daa9ef677f3","html_url":"https://github.com/wnayes/glTF-js-utils","commit_stats":{"total_commits":99,"total_committers":4,"mean_commits":24.75,"dds":0.2222222222222222,"last_synced_commit":"39f01d52513b7f50cba60644b3714ff2a3f5b117"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/wnayes/glTF-js-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wnayes%2FglTF-js-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wnayes%2FglTF-js-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wnayes%2FglTF-js-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wnayes%2FglTF-js-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wnayes","download_url":"https://codeload.github.com/wnayes/glTF-js-utils/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wnayes%2FglTF-js-utils/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273271395,"owners_count":25075963,"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","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["3d-models","gltf2","javascript"],"created_at":"2024-11-07T07:09:52.987Z","updated_at":"2025-09-02T10:31:52.249Z","avatar_url":"https://github.com/wnayes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"gltf-js-utils\n=============\n\nHelper library for creating glTF 2.0 models with JavaScript.\n\n## Usage\n\n#### Creating glTF from scratch\n\nCreate a `GLTFAsset` structure using the provided types.\n\n```javascript\nimport {\n  GLTFAsset, Scene, Node, Material, Texture, Mesh, Vertex, WrappingMode\n} from \"gltf-js-utils\";\n\nconst asset = new GLTFAsset();\nconst scene = new Scene();\nasset.addScene(scene);\n\nconst node = new Node();\nnode.setTranslation(x, y, z);\nnode.setRotationRadians(x, y, z);\nnode.setScale(x, y, z);\nscene.addNode(node);\n\nconst material = new Material();\n// Supported texture types: HTMLImageElement | HTMLCanvasElement | ArrayBuffer (PNG) | Data URL (PNG)\nconst texture = new Texture(image);\ntexture.wrapS = WrappingMode.CLAMP_TO_EDGE;\ntexture.wrapT = WrappingMode.REPEAT;\nmaterial.pbrMetallicRoughness.baseColorTexture = texture;\n\nconst mesh = new Mesh();\nmesh.material = [material];\nnode.mesh = mesh;\n\nconst v1 = new Vertex();\nv1.x = 1;\nv1.y = 1;\nv1.z = 1;\nv1.u = 0;\nv1.v = 0;\nconst v2 = new Vertex();\n// ...\n\nconst faceColor = undefined;\nconst faceMaterialIndex = 0;\nmesh.addFace(v1, v2, v3, faceColor, faceMaterialIndex);\nmesh.addFace(v4, v5, v6, faceColor, faceMaterialIndex);\n// ...\n```\n\n###### Create Animation\n\n```javascript\nimport { Node, Animation, InterpolationMode, Transformation } from \"gltf-js-utils\";\n\nconst node = new Node();\nscene.addNode(node);\nconst nodeAnim = new Animation(Transformation.TRANSLATION);\nnodeAnim.keyframes = [\n    {\n        time: 0,\n        value: [1, 2, 3],\n        interpType: InterpolationMode.LINEAR\n    },\n    {\n        time: 0.3,\n        value: [4, 5, 6],\n        interpType: InterpolationMode.LINEAR\n    }\n];\n// or add keyframes via addKeyframe function\nnodeAnim1.addKeyframe(0.8, [7, 8, 9], InterpolationMode.STEP);\nnode.animations = [nodeAnim];\n```\n\n##### Export to a collection of individual files/data\n\nWith the default options, you'll receive an object keyed with the glTF JSON and binary buffers.\n\n```javascript\nimport { exportGLTF } from \"gltf-js-utils\";\n\nconst gltfFiles = await exportGLTF(asset);\n// {\n//   \"model.gltf\": string /* JSON glTF string */\n//   \"data1.bin\": ArrayBuffer /* ArrayBuffer of buffer data */\n//   \"data2.bin\": ArrayBuffer,\n//   \"data3.bin\": ArrayBuffer,\n//   ...\n//   \"img1.png\": ArrayBuffer /* Texture image */\n//   \"img2.png\": ArrayBuffer\n//   ...\n// }\n```\n\n##### Export using data URIs\n\nBuffers and/or images can be embedded within the JSON as data URIs.\n\n```javascript\nimport { exportGLTF, BufferOutputType } from \"gltf-js-utils\";\n\nconst gltfFiles = await exportGLTF(asset, {\n  bufferOutputType: BufferOutputType.DataURI,\n  imageOutputType: BufferOutputType.DataURI,\n});\n// {\n//   \"model.gltf\": string /* JSON glTF string, all data embedded */\n// }\n```\n\n##### Export to a ZIP file\n\nRequires a `JSZip` reference. The result will be a ZIP blob.\n\n```javascript\nimport * as JSZip from \"jszip\";\nimport { exportGLTFZip } from \"gltf-js-utils\";\n\nexportGLTFZip(asset, JSZip).then(blob =\u003e {\n  // Use FileSaver as an example.\n  saveAs(blob, \"model.zip\");\n});\n```\n\n#### Create glTF from Three.js object\n\nUse the separate [`gtlf-js-utils-three` package](https://github.com/wnayes/glTF-js-utils-three)\nto create glTF models from Three.js models.\nSee the `gtlf-js-utils-three` documentation for more details.\n\n```javascript\nimport { exportGLTF } from \"gltf-js-utils\";\nimport { glTFAssetFromTHREE } from \"gltf-js-utils-three\";\n\n// Create a Three.js Scene or Object3D structure...\nconst scene = new THREE.Scene();\n...\n\nconst gltfFiles = await exportGLTF(glTFAssetFromTHREE(scene));\n```\n\n#### Create a GLB container\n\nCalling `exportGLB` will produce a single GLB model in an ArrayBuffer.\n\n```javascript\nimport { exportGLB } from \"gltf-js-utils\";\n\nconst glbArrayBuffer = await exportGLB(asset);\n```\n\nYou can also use `exportGLTF` with the GLB output type to selectively keep some assets external.\n\n```javascript\nimport { exportGLTF, BufferOutputType } from \"gltf-js-utils\";\n\nconst gltfFiles = await exportGLTF(asset, {\n  bufferOutputType: BufferOutputType.GLB,\n  imageOutputType: BufferOutputType.External,\n});\n// {\n//   \"model.glb\": ArrayBuffer\n//   ...\n//   // Only images follow, data bins are in the GLB file\n//   \"img1.png\": ArrayBuffer /* Texture image */\n//   \"img2.png\": ArrayBuffer\n// }\n```\n\n## Limitations\n* No support for camera yet.\n\n## Development\n\nTo build:\n\n    npm install\n    npm run build\n\nTo test:\n\n    npm run test\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwnayes%2Fgltf-js-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwnayes%2Fgltf-js-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwnayes%2Fgltf-js-utils/lists"}