Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/edibotopic/babylonjs-snippets

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.
https://github.com/edibotopic/babylonjs-snippets

3d babylonjs javascript snippets visual-studio-code xr

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/edibotopic/babylonjs-snippets
Owner: edibotopic
License: mit
Created: 2021-12-03T16:15:59.000Z (about 3 years ago)
Default Branch: master
Last Pushed: 2024-04-12T09:59:08.000Z (9 months ago)
Last Synced: 2024-04-23T05:09:10.483Z (8 months ago)
Topics: 3d, babylonjs, javascript, snippets, visual-studio-code, xr
Homepage: https://marketplace.visualstudio.com/items?itemName=edibotopic.babylonjs-snippets
Size: 2.11 MB
Stars: 3
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

# Babylon.js Snippets

The 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/).

*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).

## Features

### JavaScript Snippets

JavaScript snippets can be used while editing a `.js` or `.ts` file.

For example, typing `sphere` or `box` will populate the autosuggestion popup
with corresponding snippets, which can be then be selected with
enter. These two example snippets would generate:

```js

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 1}, scene);

//or

var box = BABYLON.MeshBuilder.CreateBox("box", {size: 1}, scene);

```

Once a snippet is generated the cursor will be placed at the first *tab stop*.
In each of the cases above this will be the *name* of the mesh. After editing
the name you can then tab through the next editable arguments in the
sequence.

![Some basic example snippets](images/snippets.gif)

### HTML Snippets

All babylon.js projects require an `index.html` that loads the Babylon.js
engine and contains a *canvas* element with `id` where the scene will be
rendered.

While editing your `index.html` begin typing *HTML scene* and you should see a
snippet to create the necessary boilerplate:

![Generating HTML](images/html_snip.gif)

The `index.html` references a script `main.js` that can be populated with the
*JS scene* snippet:

![Generating JavaScript](images/js_snip.gif)

## Steps for Quick Scene Setup

Open a terminal and enter the following commands:

```bash

mkdir myProject
cd myProject
touch main.js index.html
code .

```

1. After VSCode opens, invoke the `JS scene` snippet in `main.js`:

2. Invoke the `HTML scene` snippet in `index.html`:

3. Save both files and run `index.html` with live server.

You should see the following default scene:

![Running default scene in browser](images/serve.gif)

## Release Notes

### 1.1.0

Minor release with improved TypeScript support.

- Snippets common to JavaScript and TypeScript can now be invoked in both filetypes
- Language-specific snippets are only triggered for that language

### 1.0.1-1.0.5

Minor patches:

- Fixed some typos
- Marketplace header readability
- Improved README
- Added license
- More consistent naming
- Added CHANGELOG

### 1.0.0

Major initial release of plugin containing all major snippets from the Babylon.js playground along with the following for creating a default scene:

- HTML Scene
- JS Scene

-----------------------------------------------------------------------------------------------------------

## Contributing

I can add more snippets as/if they are suggested.

### For more information

- [Babylon.js homepage](https://www.babylonjs.com/)
- [Babylon.js file viewer plugin for VSCode](https://marketplace.visualstudio.com/items?itemName=julianchen.babylon-js-viewer)
- [Babylon.js playground](https://playground.babylonjs.com/)
- [Video on Babylon.js Playground snippets](https://youtu.be/SRvCe6N7mdE)

**I hope someone finds this useful!!!**