{"id":13475696,"url":"https://github.com/pixiv/three-vrm","last_synced_at":"2026-03-12T11:09:56.442Z","repository":{"id":38238494,"uuid":"190160360","full_name":"pixiv/three-vrm","owner":"pixiv","description":"Use VRM on Three.js","archived":false,"fork":false,"pushed_at":"2025-05-08T10:18:31.000Z","size":125773,"stargazers_count":1449,"open_issues_count":50,"forks_count":123,"subscribers_count":84,"default_branch":"dev","last_synced_at":"2025-05-09T04:39:10.861Z","etag":null,"topics":["3d","avatar","gltf","threejs","vrm","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/pixiv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2019-06-04T08:25:28.000Z","updated_at":"2025-05-06T13:12:37.000Z","dependencies_parsed_at":"2023-09-27T12:36:49.898Z","dependency_job_id":"885c14f8-fb63-4047-b310-115f0919a163","html_url":"https://github.com/pixiv/three-vrm","commit_stats":{"total_commits":1762,"total_committers":27,"mean_commits":65.25925925925925,"dds":0.5646992054483542,"last_synced_commit":"9ce14ae014e3a251a629b980624d1a7fe5c73e14"},"previous_names":[],"tags_count":110,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixiv%2Fthree-vrm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixiv%2Fthree-vrm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixiv%2Fthree-vrm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixiv%2Fthree-vrm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixiv","download_url":"https://codeload.github.com/pixiv/three-vrm/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000854,"owners_count":21997442,"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":["3d","avatar","gltf","threejs","vrm","webgl"],"created_at":"2024-07-31T16:01:22.689Z","updated_at":"2026-03-12T11:09:56.434Z","avatar_url":"https://github.com/pixiv.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# `@pixiv/three-vrm`\n\n[![@pixiv/three-vrm on npm](https://img.shields.io/npm/v/@pixiv/three-vrm)](https://www.npmjs.com/package/@pixiv/three-vrm)\n\nUse [VRM](https://vrm.dev/) on [three.js](https://threejs.org/)\n\n![three-vrm](https://github.com/pixiv/three-vrm/raw/dev/three-vrm.png)\n\n[GitHub Repository](https://github.com/pixiv/three-vrm/)\n\n[Examples](https://pixiv.github.io/three-vrm/packages/three-vrm/examples)\n\n[Guides](https://github.com/pixiv/three-vrm/tree/dev/guides)\n\n[API Reference](https://pixiv.github.io/three-vrm/docs/modules/three-vrm)\n\n## How to Use\n\n### from HTML\n\nYou will need:\n\n- Three.js build\n- GLTFLoader\n- A build of @pixiv/three-vrm\n  - `.module` ones are ESM, otherwise it's UMD and injects its modules into global `THREE`\n  - `.min` ones are minified (for production), otherwise it's not minified and it comes with source maps\n\nYou can import all the dependencies via CDN like [jsDelivr](https://www.jsdelivr.com/).\n\n```html\n\u003cscript type=\"importmap\"\u003e\n  {\n    \"imports\": {\n      \"three\": \"https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js\",\n      \"three/addons/\": \"https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/\",\n      \"@pixiv/three-vrm\": \"https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js\"\n    }\n  }\n\u003c/script\u003e\n\n\u003cscript type=\"module\"\u003e\n  import * as THREE from 'three';\n  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';\n  import { VRMLoaderPlugin } from '@pixiv/three-vrm';\n\n  // ... Setup renderer, camera, scene ...\n\n  // Create a GLTFLoader - The loader for loading VRM models\n  const loader = new GLTFLoader();\n\n  // Install a GLTFLoader plugin that enables VRM support\n  loader.register((parser) =\u003e {\n    return new VRMLoaderPlugin(parser);\n  });\n\n  loader.load(\n    // URL of the VRM you want to load\n    '/models/VRM1_Constraint_Twist_Sample.vrm',\n\n    // called when the resource is loaded\n    (gltf) =\u003e {\n      // retrieve a VRM instance from gltf\n      const vrm = gltf.userData.vrm;\n\n      // add the loaded vrm to the scene\n      scene.add(vrm.scene);\n\n      // deal with vrm features\n      console.log(vrm);\n    },\n\n    // called while loading is progressing\n    (progress) =\u003e console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),\n\n    // called when loading has errors\n    (error) =\u003e console.error(error),\n  );\n\n  // ... Perform the render loop ...\n\u003c/script\u003e\n```\n\nSee the Three.js document if you are not familiar with Three.js yet: https://threejs.org/docs/#manual/en/introduction/Creating-a-scene\n\nSee the example for the complete code: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/basic.html\n\n### via npm\n\nInstall [`three`](https://www.npmjs.com/package/three) and [`@pixiv/three-vrm`](https://www.npmjs.com/package/@pixiv/three-vrm) :\n\n```sh\nnpm install three @pixiv/three-vrm\n```\n\n### Use with WebGPURenderer\n\nStarting from v3, we provide [WebGPURenderer](https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPURenderer.js) compatibility.\nTo use three-vrm with WebGPURenderer, specify the WebGPU-compatible `MToonNodeMaterial` for the `materialType` option of `MToonMaterialLoaderPlugin`.\n\n`MToonNodeMaterial` only supports Three.js r167 or later.\nThe NodeMaterial system of Three.js is still under development, so we may break compatibility with older versions of Three.js more frequently than other parts of three-vrm.\n\n```js\nimport { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';\nimport { MToonMaterialLoaderPlugin, VRMLoaderPlugin } from '@pixiv/three-vrm';\nimport { MToonNodeMaterial } from '@pixiv/three-vrm/nodes';\n\n// ... Setup renderer, camera, scene ...\n\n// Create a GLTFLoader\nconst loader = new GLTFLoader();\n\n// Register a VRMLoaderPlugin\nloader.register((parser) =\u003e {\n\n  // create a WebGPU compatible MToonMaterialLoaderPlugin\n  const mtoonMaterialPlugin = new MToonMaterialLoaderPlugin(parser, {\n\n    // set the material type to MToonNodeMaterial\n    materialType: MToonNodeMaterial,\n\n  });\n\n  return new VRMLoaderPlugin(parser, {\n\n    // Specify the MToonMaterialLoaderPlugin to use in the VRMLoaderPlugin instance\n    mtoonMaterialPlugin,\n\n  });\n\n});\n\n// ... Load the VRM and perform the render loop ...\n```\n\nSee the example for the complete code: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/webgpu-dnd.html\n\n## Contributing\n\nSee: [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## LICENSE\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixiv%2Fthree-vrm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixiv%2Fthree-vrm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixiv%2Fthree-vrm/lists"}