{"id":19211780,"url":"https://github.com/edibotopic/babylonjs-snippets","last_synced_at":"2025-05-12T20:14:46.036Z","repository":{"id":114296653,"uuid":"434658987","full_name":"edibotopic/babylonjs-snippets","owner":"edibotopic","description":"Snippet plugin for developing and prototyping 3D/VR/XR Babylon.js projects in Visual Studio Code. Allows developers to quickly develop a 3D scene in a similar manner to the official Babylon.js playground.","archived":false,"fork":false,"pushed_at":"2024-04-12T09:59:08.000Z","size":2208,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T17:39:16.374Z","etag":null,"topics":["3d","babylonjs","javascript","snippets","visual-studio-code","xr"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=edibotopic.babylonjs-snippets","language":null,"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/edibotopic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-12-03T16:15:59.000Z","updated_at":"2023-09-18T20:30:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"6303d4e2-e158-40db-bc09-2b2a3d42d825","html_url":"https://github.com/edibotopic/babylonjs-snippets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edibotopic%2Fbabylonjs-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edibotopic%2Fbabylonjs-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edibotopic%2Fbabylonjs-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edibotopic%2Fbabylonjs-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edibotopic","download_url":"https://codeload.github.com/edibotopic/babylonjs-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253814991,"owners_count":21968561,"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","javascript","snippets","visual-studio-code","xr"],"created_at":"2024-11-09T13:44:42.089Z","updated_at":"2025-05-12T20:14:46.019Z","avatar_url":"https://github.com/edibotopic.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Babylon.js Snippets\n\nThe browser-based [Babylon.js playground](https://playground.babylonjs.com/) is preconfigured with a set of useful code snippets (or \"[templates](https://doc.babylonjs.com/toolsAndResources/tools/playground/pgTemplates)\"). This plugin makes these and other snippets available to [Babylon.js](https://www.babylonjs.com/) developers using [Visual Studio Code](https://code.visualstudio.com/).\n\n*Babylon.js Snippets* includes all of the snippets from the **playground** along with additional JavaScript and HTML snippets to create and render a default scene with meshes, lights and camera. The snippets are available as a [VSCode plugin](https://marketplace.visualstudio.com/items?itemName=edibotopic.babylonjs-snippets).\n\n## Features\n\n### JavaScript Snippets\n\nJavaScript snippets can be used while editing a `.js` or `.ts` file.\n\nFor example, typing `sphere` or `box` will populate the autosuggestion popup\nwith corresponding snippets, which can be then be selected with\n\u003ckbd\u003eenter\u003c/kbd\u003e. These two example snippets would generate:\n\n```js\n\nvar sphere = BABYLON.MeshBuilder.CreateSphere(\"sphere\", {diameter: 1}, scene);\n\n//or\n\nvar box = BABYLON.MeshBuilder.CreateBox(\"box\", {size: 1}, scene);\n\n```\n\nOnce a snippet is generated the cursor will be placed at the first *tab stop*.\nIn each of the cases above this will be the *name* of the mesh. After editing\nthe name you can then \u003ckbd\u003etab\u003c/kbd\u003e through the next editable arguments in the\nsequence.\n\n![Some basic example snippets](images/snippets.gif)\n\n### HTML Snippets\n\nAll babylon.js projects require an `index.html` that loads the Babylon.js\nengine and contains a *canvas* element with `id` where the scene will be\nrendered.\n\nWhile editing your `index.html` begin typing *HTML scene* and you should see a\nsnippet to create the necessary boilerplate:\n\n![Generating HTML](images/html_snip.gif)\n\nThe `index.html` references a script `main.js` that can be populated with the\n*JS scene* snippet:\n\n![Generating JavaScript](images/js_snip.gif)\n\n## Steps for Quick Scene Setup\n\nOpen a terminal and enter the following commands:\n\n```bash\n\nmkdir myProject\ncd myProject\ntouch main.js index.html\ncode .\n\n```\n\n1. After VSCode opens, invoke the `JS scene` snippet in `main.js`:\n\n2. Invoke the `HTML scene` snippet in `index.html`:\n\n3. Save both files and run `index.html` with live server.\n\nYou should see the following default scene:\n\n![Running default scene in browser](images/serve.gif)\n\n## Release Notes\n\n### 1.1.0\n\nMinor release with improved TypeScript support.\n\n- Snippets common to JavaScript and TypeScript can now be invoked in both filetypes\n- Language-specific snippets are only triggered for that language\n\n### 1.0.1-1.0.5\n\nMinor patches:\n\n- Fixed some typos\n- Marketplace header readability\n- Improved README\n- Added license\n- More consistent naming\n- Added CHANGELOG\n\n### 1.0.0\n\nMajor initial release of plugin containing all major snippets from the Babylon.js playground along with the following for creating a default scene:\n\n- HTML Scene\n- JS Scene\n\n-----------------------------------------------------------------------------------------------------------\n\n## Contributing\n\nI can add more snippets as/if they are suggested.\n\n### For more information\n\n- [Babylon.js homepage](https://www.babylonjs.com/)\n- [Babylon.js file viewer plugin for VSCode](https://marketplace.visualstudio.com/items?itemName=julianchen.babylon-js-viewer)\n- [Babylon.js playground](https://playground.babylonjs.com/)\n- [Video on Babylon.js Playground snippets](https://youtu.be/SRvCe6N7mdE)\n\n**I hope someone finds this useful!!!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedibotopic%2Fbabylonjs-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedibotopic%2Fbabylonjs-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedibotopic%2Fbabylonjs-snippets/lists"}