{"id":13417522,"url":"https://github.com/troisjs/trois","last_synced_at":"2025-05-14T02:08:32.038Z","repository":{"id":37306560,"uuid":"295031696","full_name":"troisjs/trois","owner":"troisjs","description":"✨ ThreeJS + VueJS 3 + ViteJS ⚡","archived":false,"fork":false,"pushed_at":"2023-07-18T13:58:34.000Z","size":10148,"stargazers_count":4370,"open_issues_count":72,"forks_count":315,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-05-06T07:09:22.700Z","etag":null,"topics":["3d","three-js","threejs","vitejs","vuejs","vuejs3","webgl"],"latest_commit_sha":null,"homepage":"https://troisjs.github.io","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/troisjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"klevron","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-09-12T21:47:57.000Z","updated_at":"2025-05-05T12:12:17.000Z","dependencies_parsed_at":"2023-01-25T18:15:57.641Z","dependency_job_id":"84730e80-1822-45f0-9321-862efc21832f","html_url":"https://github.com/troisjs/trois","commit_stats":{"total_commits":536,"total_committers":14,"mean_commits":"38.285714285714285","dds":"0.11940298507462688","last_synced_commit":"a1b12398091061b34d872eb0191b22d252b43c89"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troisjs%2Ftrois","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troisjs%2Ftrois/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troisjs%2Ftrois/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/troisjs%2Ftrois/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/troisjs","download_url":"https://codeload.github.com/troisjs/trois/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254053178,"owners_count":22006717,"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","three-js","threejs","vitejs","vuejs","vuejs3","webgl"],"created_at":"2024-07-30T22:00:39.166Z","updated_at":"2025-05-14T02:08:27.021Z","avatar_url":"https://github.com/troisjs.png","language":"TypeScript","readme":"# ✨ ThreeJS + VueJS 3 + ViteJS ⚡\n[![NPM Package][npm]][npm-url]\n[![Build Size][build-size]][build-size-url]\n[![NPM Downloads][npm-downloads]][npmtrends-url]\n[![Twitter][email]][email-url]\n[![Twitter][twitter]][twitter-url]\n\n[npm]: https://img.shields.io/npm/v/troisjs\n[npm-url]: https://www.npmjs.com/package/troisjs\n[build-size]: https://badgen.net/bundlephobia/minzip/troisjs\n[build-size-url]: https://bundlephobia.com/result?p=troisjs\n[npm-downloads]: https://img.shields.io/npm/dw/troisjs\n[npmtrends-url]: https://www.npmtrends.com/troisjs\n[twitter]: https://img.shields.io/twitter/follow/soju22?label=\u0026style=social\n[twitter-url]: https://twitter.com/soju22\n[email]: https://img.shields.io/badge/hire-%20ThreeJS%20Expert-brightgreen\n[email-url]: mailto:kevin.levron@gmail.com\n\n\u003cp style=\"text-align:center;\"\u003e\n  \u003ca href=\"https://troisjs-flower.pages.dev\"\u003e\u003cimg src=\"/screenshots/troisjs_15.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs-water.pages.dev\"\u003e\u003cimg src=\"/screenshots/troisjs_14.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs-dof-test.pages.dev\"\u003e\u003cimg src=\"/screenshots/troisjs_13.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/little-planet/\"\u003e\u003cimg src=\"/screenshots/little-planet.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/physics/1.html\"\u003e\u003cimg src=\"/screenshots/troisjs_10.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs-trails.pages.dev\"\u003e\u003cimg src=\"/screenshots/troisjs_12.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/demos/2.html\"\u003e\u003cimg src=\"/screenshots/troisjs_5.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/materials/2.html\"\u003e\u003cimg src=\"/screenshots/troisjs_2.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/loop.html\"\u003e\u003cimg src=\"/screenshots/troisjs_6.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/shadows.html\"\u003e\u003cimg src=\"/screenshots/troisjs_7.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/demos/5.html\"\u003e\u003cimg src=\"/screenshots/troisjs_8.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://troisjs.github.io/examples/lights.html\"\u003e\u003cimg src=\"/screenshots/troisjs_9.jpg\" width=\"24%\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n- 💻 Examples (wip) : https://troisjs.github.io/ ([sources](https://github.com/troisjs/troisjs.github.io/tree/master/src/components))\n- 📖 Doc (wip) : https://troisjs.github.io/guide/ ([repo](https://github.com/troisjs/troisjs.github.io))\n- 🚀 Codepen examples : https://codepen.io/collection/AxoWoz\n\nI wanted to code something similar to *react-three-fiber* but for VueJS.\n\nI started from scratch, I will rewrite some of my [WebGL demos](https://codepen.io/collection/AGZywR) to see if this little toy can do the job.\n\n**Feel free to contact me if you need a ThreeJS developer ^^**\n\n*Trois* is a french word, it means *Three*.\n\n## Sponsors (Thanks 💙 !!!)\n\n\u003ca href=\"https://github.com/avaer\"\u003e\n  \u003cimg src=\"https://github.com/avaer.png\" width=\"50px\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/designori-llc\"\u003e\n  \u003cimg src=\"https://github.com/designori-llc.png\" width=\"50px\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/michelwaechter\"\u003e\n  \u003cimg src=\"https://github.com/michelwaechter.png\" width=\"50px\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/okydk\"\u003e\n  \u003cimg src=\"https://github.com/okydk.png\" width=\"50px\" /\u003e\n\u003c/a\u003e\n\n## Contributors (Thanks 💙 !!!)\n\n\u003ca href=\"https://github.com/klevron\"\u003e\n  \u003cimg src=\"https://github.com/klevron.png\" width=\"50px\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/SaFrMo\"\u003e\n  \u003cimg src=\"https://github.com/SaFrMo.png\" width=\"50px\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/yoanngueny\"\u003e\n  \u003cimg src=\"https://github.com/yoanngueny.png\" width=\"50px\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/xcchcaptain\"\u003e\n  \u003cimg src=\"https://github.com/xcchcaptain.png\" width=\"50px\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/oneWaveAdrian\"\u003e\n  \u003cimg src=\"https://github.com/oneWaveAdrian.png\" width=\"50px\" /\u003e\n\u003c/a\u003e\n\n## Usage (CDN)\n\nTroisJS is really simple and easy to use :\n\n```html\n\u003cdiv id=\"app\"\u003e\n  \u003crenderer ref=\"renderer\" antialias orbit-ctrl resize=\"window\"\u003e\n    \u003ccamera :position=\"{ z: 10 }\"\u003e\u003c/camera\u003e\n    \u003cscene\u003e\n      \u003cpoint-light :position=\"{ y: 50, z: 50 }\"\u003e\u003c/point-light\u003e\n      \u003cbox ref=\"box\" :rotation=\"{ y: Math.PI / 4, z: Math.PI / 4 }\"\u003e\n        \u003clambert-material\u003e\u003c/lambert-material\u003e\n      \u003c/box\u003e\n    \u003c/scene\u003e\n  \u003c/renderer\u003e\n\u003c/div\u003e\n\n\u003cscript type=\"module\"\u003e\n  import { createApp } from 'https://unpkg.com/troisjs@0.3.2/build/trois.module.cdn.min.js';\n  createApp({\n    mounted() {\n      const renderer = this.$refs.renderer;\n      const box = this.$refs.box.mesh;\n      renderer.onBeforeRender(() =\u003e {\n        box.rotation.x += 0.01;\n      });\n    }\n  }).mount('#app');\n\u003c/script\u003e\n```\n\nRead more on https://troisjs.github.io/guide/\n","funding_links":["https://github.com/sponsors/klevron"],"categories":["Projects Using Vite.js","TypeScript","前端开发框架及项目","Components \u0026 Libraries","Related Frameworks"],"sub_categories":["Open Source","其他_文本生成、文本对话","UI Utilities","Vue"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroisjs%2Ftrois","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftroisjs%2Ftrois","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroisjs%2Ftrois/lists"}