{"id":13574138,"url":"https://github.com/Beg-in/vue-babylonjs","last_synced_at":"2025-04-04T14:31:45.510Z","repository":{"id":50269497,"uuid":"119333530","full_name":"Beg-in/vue-babylonjs","owner":"Beg-in","description":"A ready-to-go 3d environment for Vue.js using Babylon.js","archived":false,"fork":false,"pushed_at":"2023-02-11T05:37:55.000Z","size":14731,"stargazers_count":462,"open_issues_count":33,"forks_count":73,"subscribers_count":25,"default_branch":"master","last_synced_at":"2024-12-30T19:31:02.434Z","etag":null,"topics":["3d","babylonjs","component-entity","engine","game","gamedev","graphics","html","javascript","js","reality","virtual","vr","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://vuebabylonjs.com","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/Beg-in.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2018-01-29T04:53:32.000Z","updated_at":"2024-12-11T07:37:14.000Z","dependencies_parsed_at":"2023-10-20T18:21:11.674Z","dependency_job_id":null,"html_url":"https://github.com/Beg-in/vue-babylonjs","commit_stats":{"total_commits":127,"total_committers":11,"mean_commits":"11.545454545454545","dds":"0.18110236220472442","last_synced_commit":"1b8b93cea2368bc3a289fa3d30f41c2c62db673c"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beg-in%2Fvue-babylonjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beg-in%2Fvue-babylonjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beg-in%2Fvue-babylonjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beg-in%2Fvue-babylonjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Beg-in","download_url":"https://codeload.github.com/Beg-in/vue-babylonjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247103296,"owners_count":20884023,"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","babylonjs","component-entity","engine","game","gamedev","graphics","html","javascript","js","reality","virtual","vr","vue","vuejs"],"created_at":"2024-08-01T15:00:47.037Z","updated_at":"2025-04-04T14:31:45.481Z","avatar_url":"https://github.com/Beg-in.png","language":"JavaScript","funding_links":[],"categories":["Projects","JavaScript"],"sub_categories":[],"readme":"[![Animated 3D Vue Logo](https://thumbs.gfycat.com/PinkPiercingBull-size_restricted.gif)](https://beg-in.github.io/vue-babylonjs/)\n# Vue-BabylonJS\n\nCreate high quality 3D graphics in the web as easily as writing HTML and CSS.\n\nQuickly make a 3D animation:\n\n![3D Animation](https://thumbs.gfycat.com/WhiteTangibleIndianspinyloach-size_restricted.gif)\n\nIt's this easy:\n\n\n```vue\n\u003ctemplate\u003e\n  \u003cScene\u003e\n    \u003cCamera\u003e\u003c/Camera\u003e\n    \u003cHemisphericLight diffuse=\"#0000FF\"\u003e\u003c/HemisphericLight\u003e\n    \u003cEntity :position=\"[0, 0, 5]\"\u003e\n      \u003cAnimation property=\"rotation.x\" :duration=\"5\" :end=\"Math.PI * 2\"\u003e\u003c/Animation\u003e\n      \u003cAnimation property=\"rotation.y\" :duration=\"5\" :end=\"Math.PI * 2\"\u003e\u003c/Animation\u003e\n      \u003cAnimation property=\"rotation.z\" :duration=\"5\" :end=\"Math.PI * 2\"\u003e\u003c/Animation\u003e\n      \u003cPointLight diffuse=\"#FF0000\"\u003e\u003c/PointLight\u003e\n      \u003ctemplate v-for=\"x in [0, 4, -4]\"\u003e\n        \u003ctemplate v-for=\"y in [0, 4, -4]\"\u003e\n          \u003cBox v-for=\"z in [0, 4, -4]\" :position=\"[x, y, z]\" :key=\"`${x},${y},${z}`\"\u003e\u003c/Box\u003e\n        \u003c/template\u003e\n      \u003c/template\u003e\n    \u003c/Entity\u003e\n  \u003c/Scene\u003e\n\u003c/template\u003e\n```\n\nIt's even easier if you use [Pug (Jade)](https://pugjs.org) for templating:\n\n```vue\n\u003ctemplate lang=\"pug\"\u003e\n  Scene\n    Camera\n    HemisphericLight(diffuse=\"#0000FF\")\n    Entity(:position=\"[0, 0, 5]\")\n      Animation(property=\"rotation.x\" :duration=\"5\" :end=\"Math.PI * 2\")\n      Animation(property=\"rotation.y\" :duration=\"5\" :end=\"Math.PI * 2\")\n      Animation(property=\"rotation.z\" :duration=\"5\" :end=\"Math.PI * 2\")\n      PointLight(diffuse=\"#FF0000\")\n      template(v-for=\"x in [0, 4, -4]\")\n        template(v-for=\"y in [0, 4, -4]\")\n          Box(v-for=\"z in [0, 4, -4]\" :position=\"[x, y, z]\" :key=\"`${x},${y},${z}`\")\n\u003c/template\u003e\n```\n\n## Getting Started, Installation, and API Documentation\n\n[See the documentation website](https://vuebabylonjs.com)\n\n## Updates\n\n[Subscribe to the mailing list issue to keep up with important updates](https://github.com/Beg-in/vue-babylonjs/issues/1)\n\n## About\n\nVue-BabylonJS is a 3D graphics component plugin for [Vue.js](https://vuejs.org/) powered by [BabylonJS](https://www.babylonjs.com/).\nVue-BabylonJS draws inspiration from A-Frame, but can be more performant with the exclusion of DOM manipulation and has closer ties to JavaScript through property binding syntax in Vue. Compared to ReactVR which uses A-Frame, Vue-BabylonJS has the potential for higher performance, more organized and decoupled components, and a higher-quality rendering engine. \n\n[See the discussion on the HTML 5 Game Dev Forums](http://www.html5gamedevs.com/topic/35379-vue-integration-like-a-frame/)\n\n### Rationale\n\nWe use BabylonJS because it is the most efficient, most feature-rich, and most modern WebGL graphics library available. The addition of Vue makes the engine reactive and development becomes easier to reason about and organize. Out-of-the-box mobile support and sensible defaults make getting started a breeze.\n\nThe underlying engine is easily accessible to give pros the tools to tweak every aspect of BabylonJS. The organizational structure of the library is a Component-Entity-System and the Entity component contains many powerful features such a matrix transformation to allow for interaction with the Scene graph like a group of HTML divs. Powerful tools are available such as an integrated reactive property system that enables modifying 3D objects within templates and a Shader component that makes adding WebGL shaders easy.\n\n## Contributing\n\nSee `CONTRIBUTING.md`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBeg-in%2Fvue-babylonjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBeg-in%2Fvue-babylonjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBeg-in%2Fvue-babylonjs/lists"}