{"id":13563842,"url":"https://github.com/fritx/vue-threejs","last_synced_at":"2025-05-16T06:08:12.138Z","repository":{"id":40744089,"uuid":"59423305","full_name":"fritx/vue-threejs","owner":"fritx","description":"Vue bindings for Three.js","archived":false,"fork":false,"pushed_at":"2022-07-27T03:07:45.000Z","size":2321,"stargazers_count":788,"open_issues_count":14,"forks_count":114,"subscribers_count":42,"default_branch":"dev","last_synced_at":"2025-05-11T18:16:35.878Z","etag":null,"topics":["bindings","threejs","vue"],"latest_commit_sha":null,"homepage":"http://fritx.github.io/vue-threejs/","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/fritx.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":"2016-05-22T16:49:23.000Z","updated_at":"2025-05-06T08:06:16.000Z","dependencies_parsed_at":"2022-08-10T00:41:17.247Z","dependency_job_id":null,"html_url":"https://github.com/fritx/vue-threejs","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/fritx%2Fvue-threejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fritx%2Fvue-threejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fritx%2Fvue-threejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fritx%2Fvue-threejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fritx","download_url":"https://codeload.github.com/fritx/vue-threejs/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478193,"owners_count":22077676,"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":["bindings","threejs","vue"],"created_at":"2024-08-01T13:01:23.845Z","updated_at":"2025-05-16T06:08:07.125Z","avatar_url":"https://github.com/fritx.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Utilities [🔝](#readme)","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI实用程序","Components \u0026 Libraries","Integrations","UI Utilities"],"sub_categories":["Libraries \u0026 Plugins","WebGL的","UI Utilities","Miscellaneous","WebGL"],"readme":"# vue-threejs\n\n\u003ca href=\"https://www.npmjs.com/package/vue-threejs\"\u003e\u003cimg height=\"20\" src=\"https://img.shields.io/npm/dm/vue-threejs.svg\"\u003e\u003c/a\u003e\n\n\u003e \\[WIP\\] [Three.js][threejs] bindings for [Vue][vue]\n\nMigrated from [react-threejs][react-threejs]\n\nDemos: [react-world][react-world], [vue-world][vue-world]\n\n\u003cimg width=\"400\" src=\"https://github.com/fritx/react-threejs/raw/dev/debugging.jpg\"\u003e\n\n```js\n// import VueThreejs from 'vue-threejs' // below 0.2.0\nimport * as VueThreejs from 'vue-threejs' // \u003e= 0.2.0\n\nVue.use(VueThreejs)\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003crenderer :size=\"{ w: 600, h: 400 }\"\u003e\n    \u003cscene\u003e\n      \u003ccamera :position=\"{ z: 15 }\"\u003e\u003c/camera\u003e\n      \u003cmesh :obj=\"mesh\" :position=\"{ y: -200 }\"\u003e\u003c/mesh\u003e\n      \u003canimation :fn=\"animate\" :speed=\"3\"\u003e\u003c/animation\u003e\n    \u003c/scene\u003e\n  \u003c/renderer\u003e\n\u003c/template\u003e\n```\n\n**Physics**\n\n```vue\n\u003cmovement-system\u003e\n  \u003cmass-object :rv0=\"{ x: 2, y: 2 }\" :v0=\"{ x: 10 }\"\n      :f=\"{ x: -3, y: -2 }\" :m=\"1\"\u003e\n    \u003ccube texture=\"cobblestone\" :size=\"1\"\u003e\u003c/cube\u003e\n  \u003c/mass-object\u003e\n  \u003cmass-object :rv0=\"{ x: 2, z: 2 }\" :v0=\"{ z: 20 }\"\n      :f=\"{ y: -1, z: -8 }\" :m=\"1.2\"\u003e\n    \u003ccube texture=\"diamond\" :size=\"1.2\"\u003e\u003c/cube\u003e\n  \u003c/mass-object\u003e\n\u003c/movement-system\u003e\n```\n\n```vue\n\u003coimo-world :options=\"{ gravity: [0, -9.8, 0] }\"\u003e\n  \u003cspace-system :m-scale=\"10 ** 4\"\u003e\n    \u003cspace-object v-for=\"t in textures\" :key=\"t\"\u003e\n      \u003coimo-body :options=\"{ move: true, density: 1 }\"\u003e\n        \u003ccube :texture=\"t\" :size=\"1\"\u003e\u003c/cube\u003e\n      \u003c/oimo-body\u003e\n    \u003c/space-object\u003e\n  \u003c/space-system\u003e\n\u003c/oimo-world\u003e\n```\n\n**Roadmap**\n\n- [x] Basic components\n  - [x] renderer/scene/camera/listener\n  - [x] object3d/light/audio/controls/animation\n  - [x] mesh/geometry/material/texture/obj-mtl\n- [ ] Watch for props change\n  - [x] position/rotation/obj\n  - [ ] more\n- [ ] Animation\n  - [x] component/animate/speed/paused/blocked\n  - [ ] global-control\n- [ ] Physical engine\n  - [x] movement(a/v/pos/ra/rv/rot)/mass(m/F)\n  - [x] gravity(G/r)/collision/oimo\n  - [ ] circular-motion/centripetal-force\n- [ ] Unit test\n  - [x] karma/mocha/phantom\n  - [ ] avoriaz/ava\n\n**Study Notes**\n\n- [VueJS extend component: remove parent's property](https://stackoverflow.com/questions/45680047/vuejs-extend-component-remove-parents-property)\n- [Vue2 migration commits of vue-threejs](https://github.com/fritx/vue-threejs/commits/vue2)\n  - `cannot use \u003cslot\u003e as root element`\n  - `lifecycle ready =\u003e mounted`\n  - `template or render function not defined`\n  - `avoid mutating a prop directly`\n  - `this.$dispatch is not a function`\n- [v-ref is not working with \u003ctemplate\u003e element](https://github.com/vuejs/vue/issues/681#issuecomment-75802646)\n- [Can I use a compoent inherit other compoent?](https://github.com/vuejs/Discussion/issues/354#issuecomment-133019536)\n\n[react-world]: http://fritx.github.io/react-threejs/example/\n[vue-world]: http://fritx.github.io/vue-threejs/\n[react-threejs]: https://github.com/fritx/react-threejs\n[threejs]: https://github.com/mrdoob/three.js\n[vue]: https://github.com/vuejs/vue\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffritx%2Fvue-threejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffritx%2Fvue-threejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffritx%2Fvue-threejs/lists"}