Babylon.js Snippets

The browser-based Babylon.js playground is preconfigured with a set of useful code snippets (or "templates"). This plugin makes these and other snippets available to Babylon.js developers using Visual Studio Code.

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.

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:

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.

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:

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

Steps for Quick Scene Setup

Open a terminal and enter the following commands:

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:

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
• Babylon.js file viewer plugin for VSCode
• Babylon.js playground
• Video on Babylon.js Playground snippets

I hope someone finds this useful!!!