
## This tutorial

[Part 1: How to use BabylonJS with Vue](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_1 "How to use BabylonJS with Vue")

[Part 2: How to pass data between BabylonJS and Vue"](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2/ "How to pass data between BabylonJS and Vue")

[Part 3: BabylonJS and Vue - async scene methods](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_3/ "BabylonJS and Vue - async scene methods")

[Part 4: BabylonJS and Vue - messages driven scene](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_4/ "BabylonJS and Vue - messages driven scene")

You can find a quick prototype of the mentioned solution running here https://babylonjs.nascor.tech/scene-director/

And the source repository can be found at https://github.com/RolandCsibrei/babylonjs-vue-messages-driven-scene

## A real app using Typescript, Vue 2 with Composition API, mobile friendly Quasar based GUI

https://github.com/RolandCsibrei/babylonjs-real-sun-moon

## BabylonJS official documentation

[Getting started with BabylonJS](/features/introductionToFeatures "Getting started")

[The BabylonJS GUI](/features/featuresDeepDive/gui/gui "BabylonJS GUI")

[The BabylonJS Inspector not just for debugging](/toolsAndResources/inspector "BabylonJS Inspector")

[Installing BabylonJS - ES6 tutorial](/setup/frameworkPackages/es6Support "Installing BabylonJS - ES6 tutorial")

## Abstract

[Understanding reflow and repaint in the browser](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg "Understanding reflow and repaint in the browser")

[CSS Triggers](https://csstriggers.com/ "CSS Trigger")

[Passing of variables by Value and by Reference in Javascript](https://www.geeksforgeeks.org/pass-by-value-and-pass-by-reference-in-javascript/ "Passing of variables by Value and by Reference in Javascript")

## Vue 2 related

[Official Vue 2 installation page](https://v2.vuejs.org/v2/guide/installation "The offical Vue 2 installation page")

[Official Vue 2 Components Basic page](https://v2.vuejs.org/v2/guide/components "Vue 2 Components Basics")

## Vue 3 related

[Official Vue 3 installation page](https://vuejs.org/guide/quick-start.html "The offical Vue 3 installation page")

[Official Vue 3 Components Basic page](https://vuejs.org/guide/essentials/component-basics.html "Vue 3 Components Basic")

## GitHub

## Vue 2 related

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/branches/all

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/fps-by-callback

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/fps-by-exposed-engine

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/vue-to-bjs-no-expose

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/vue-to-bjs-exposed-vector3

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/vue-to-bjs-exposed-engine

## Vue 3 related

https://github.com/RolandCsibrei/babylonjs-vue3-javascript-basic-setup

https://github.com/RolandCsibrei/babylonjs-vue3-javascript

## Typescript, Vue2, Composition API, Quasar

https://github.com/RolandCsibrei/babylonjs-quasar-vue2-composition-api-typescript



It's really easy to use BabylonJS with Vue. This page will help you to setup a minimalistic BabylonJS scene with Vue. We will cover both Vue 3 and Vue 2 using javascript.

## Prerequisites

If you haven't created your Vue project yet, visit the official Vue documentation on how to setup a Vue project.

https://vuejs.org/guide/quick-start.html for Vue 3

https://v2.vuejs.org/v2/guide/installation for Vue 2

Please make sure, that your Vue app was correctly installed and it can be run without errors. If you've created the Vue app using the Vue CLI, you can start your app by running a `npm run serve` in your Vue app directory.

The goal of this tutorial is to show how to connect the two frameworks together and not how to use these frameworks alone. You need to be familiar with both frameworks at basic level to get started.

After installing and testing your Vue app you should end up with a very similar directory structure for Vue 3 and Vue 2 also:
![New Vue project directory structure](/img/resources/vue/bjs-vue-doc-1.png)

## Installing BabylonJS

We are going to use the newer `@babylonjs/core` ES6 package.

In your Vue app directory install the BabylonJS dependencies:

```bash
npm install @babylonjs/core
```

If you want to use the [BabylonJS GUI](/features/featuresDeepDive/gui "BabylonJS GUI"), you need to install:

```bash
npm install @babylonjs/gui
```

If you want to use the BabylonJS [Inspector](/toolsAndResources/inspector "BabylonJS Inspector") for debugging, you need to install another package (you can add this package as a dev dependency if you don't plan to use the Inspector in production):

```bash
npm install @babylonjs/inspector
```

You can find more on installing BabylonJS [here](/setup/frameworkPackages/es6Support "Installing BabylonJS - ES6 tutorial").

## The Vue component

We are going to build a reusable Vue component which can be used to display a BabylonJS scene.

Create a file called `BabylonScene.vue` in `src/components` and add this:

### Vue 3

```jsx
<template>
  <canvas ref="bjsCanvas" width="500" height="500" />
</template>

<script>
import { ref, onMounted } from "@vue/runtime-core";
import { createScene } from "../scenes/MyFirstScene";

export default {
  name: "BabylonScene",
  setup() {
    const bjsCanvas = ref(null);

    onMounted(() => {
      if (bjsCanvas.value) {
        createScene(bjsCanvas.value);
      }
    });

    return {
      bjsCanvas,
    };
  },
};
</script>
```

### Vue 2

```jsx
<template>
  <div>
    <canvas ref="bjsCanvas" width="500" height="500" />
  </div>
</template>

<script>
import { createScene } from "../scenes/MyFirstScene";

export default {
  name: "BabylonScene",

  mounted() {
    const bjsCanvas = this.$refs.bjsCanvas;
    if (bjsCanvas) {
      createScene(bjsCanvas);
    }
  },
};
</script>
```

You can access the canvas by the `this.$refs` object in the `mounted()` callback. Vue 2 explained below.

In Vue 2 the `template` must have only one root, so it is a good idea to wrap our `canvas` into a `div` element, so we can add new elements into our `template` without breaking the original root element.

Create a directory called `scenes` in `src`. Create a file called `MyFirstScene.js` in `src/scenes` and copy the following code into the newly created file:

```jsx
import { Engine, Scene, FreeCamera, Vector3, MeshBuilder, StandardMaterial, Color3, HemisphericLight } from "@babylonjs/core";
const createScene = (canvas) => {
  const engine = new Engine(canvas);
  const scene = new Scene(engine);

  const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
  camera.setTarget(Vector3.Zero());
  camera.attachControl(canvas, true);

  new HemisphericLight("light", Vector3.Up(), scene);

  const box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
  const material = new StandardMaterial("box-material", scene);
  material.diffuseColor = Color3.Blue();
  box.material = material;

  engine.runRenderLoop(() => {
    scene.render();
  });
};

export { createScene };
```

We put the BabylonJS code to a separate file, so we can use it anywhere.

Open `src/App.vue` and get completely rid of the `HelloWorld.vue` component and add the `BabylonScene.vue` component or just replace the content of the file with the following code and rename it:

```jsx
<template>
  <canvas ref="bjsCanvas" width="500" height="500" />
</template>

<script>
import { ref, onMounted } from "@vue/runtime-core";
import { createScene } from "../scenes/MyFirstScene";

export default {
  name: "BabylonScene",
  setup() {
    const bjsCanvas = ref(null);

    onMounted(() => {
      if (bjsCanvas.value) {
        createScene(bjsCanvas.value);
      }
    });

    return {
      bjsCanvas,
    };
  },
};
</script>
```

The `ref` value of the `<canvas>` element in the `<template>` must match the variable name used in the script. The variable in the script must be a `ref` and must be returned from the `setup()` function. In our example `bjsCanvas`.

Do not forget to access the `HTMLCanvasElement` using the `value` property of the `ref` variable (Vue standard). That's why we use `bjsCanvas.value`.

The DOM is accessible only after the Vue component has been mounted. This is why we need to init our scene in the `onMounted` callback in Vue 3 or in the `mounted` callback in Vue 2.

Now you can get rid of the example component and delete the file located at `src/components/HelloWorld.vue`.

The application is ready to be tested. Run your app using `npm run serve` and you should see a blue cube on a 500x500px canvas in the left uppper corner.

## Async scene

Sooner or later you will need to create a scene which will use asynchronous functionality. It is very easy to setup such a scene with Vue. Just make the callback functions `async` and use any awaitable logic inside.

### Vue 3

```jsx
onMounted(async () => {
  if (bjsCanvas.value) {
    await createScene(bjsCanvas.value);
  }
});
```

### Vue 2

```jsx
async mounted() {
  const bjsCanvas = this.$refs.bjsCanvas;
  if (bjsCanvas) {
    await createScene(bjsCanvas);
  }
},
```

## Typescript

Define the `canvas` reference like this for Vue 3:

```typescript
const bjsCanvas = ref<HTMLCanvasElement | null>(null);
```

or for Vue 2:

```typescript
const bjsCanvas = <HTMLCanvasElement>this.$refs.bjsCanvas;
```

rename the file `MyFirstScene.js` to `MyFirstScene.ts` and modify the file as follows:

```jsx
const createScene = (canvas: Scene) => {
```

## CSS triggers

If you plan to use an HTML GUI overlay over the BabylonJS canvas, pay attention to browser reflows and repaints. Especially animated alpha transparent `div`s can degrade performance. You can read more about the topic in general [here](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg "Understanding reflow and repaint in the browser") and have this cheat-sheet always prepared: [CSS Triggers](https://csstriggers.com/).

## Vue reactivity, friend or foe?

If you want to expose scene information to Vue, keep in mind, that exposing the 'wrong' objects may put Vue and BabylonJS in a recursive redraw loop and it will dramatically degrade performance. As a thumb of rule never make the BabylonJS `Engine` or `Scene` object reactive. If you suspect such behaviour, test your scene without Vue.

## Conclusion

It is easy to setup a very basic BabylonJS scene in Vue. Keep in mind, that the golden rule applies here too. Building, changing and testing smaller blocks of your application at once will help you avoid many problems when using these two awesome frameworks together.

## Where to go next?

If you don't want to pass data from Vue to BabylonJS and vice versa, you can stop here and for example visit our great [Getting started](/features/introductionToFeatures "Getting started") page otherwise jump to [part two of this tutorial](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2/ "BabylonJS and Vue - data passing").

## Links

[All links from this tutorial at one place](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_0/ "All links from this tutorial at one place")

[Part 2](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2/ "How to pass data between BabylonJS and Vue") of this tutorial

[Part 3](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_3/ "BabylonJS and Vue - async scene methods") of this tutorial

[Part 4](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_4/ "BabylonJS and Vue - messages driven scene") of this tutorial

https://github.com/RolandCsibrei/babylonjs-vue3-javascript-basic-setup

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup

A bit different approach with a window resize listener:

https://github.com/RolandCsibrei/babylonjs-vue3-javascript

If you landed on this page, because you are looking for how to use BabylonJS with Quasar on top of Vue, we ha a starter repo for you as well:

https://github.com/RolandCsibrei/babylonjs-quasar-vue2-composition-api-typescript



Sometimes you will need to issue a command from your Vue component to the BabylonJS scene, maybe it will be an animation and you need to know, when the required operation, let it be our animation, finishes.

## Prerequisites

The goal of this tutorial is to show how to connect the two frameworks together and not how to use these frameworks alone. You need to be familiar with both frameworks at basic level to get started.

You need to clone the repository from https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup. This is where we left off in part 1 so you can edit along reading the tutorial, or you can clone a repo with all the changes already made from here: https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/async-scene-methods.

## The Example

Open `src/scenes/MyFirstScene.js` and implement the animation method as follows. We have to make our function `async` and return a new `Promise` object. If we couldn't find the mesh specified by the `name` parameter, we `reject`, otherwise we create a simple animation of the `visibility` property on the `Mesh` object. We set the `onAnimationEnd` callback to `resolve` our `Promise`. That's really simple!

```jsx
async animateMeshVisibility(name, from, to, speed) {
    return new Promise((resolve, reject) => {
      const m = this.scene.getMeshByName(name);
      if (!m) {
        reject("No mesh");
      }

      const visibilityAnimation = new Animation(
        "anim",
        "visibility",
        60,
        Animation.ANIMATIONTYPE_FLOAT
      );
      const keys = [];

      const frames = 60;
      keys.push({
        frame: 0,
        value: from,
      });

      keys.push({
        frame: frames,
        value: to,
      });

      visibilityAnimation.setKeys(keys);

      m.animations = [visibilityAnimation];
      this.scene.beginAnimation(m, 0, frames, false, speed, () => {
        resolve();
      });
    });
  },
```

In the file `src/components/BabylonScene.vue` make the following changes. We have added a button to trigger the animation. Our `hide` function must be `async` so we can `await` the asynchronous method defined in the scene code. When the animation ends an alert is displayed.

```jsx
<template>
  <div>
    <button @click="hide">Hide the cube</button>
    <br />
    <canvas ref="bjsCanvas" width="500" height="500" />
  </div>
</template>

<script>
import myScene from "../scenes/MyFirstScene";

export default {
  name: "BabylonScene",
  methods: {
    async hide() {
      await myScene.animateMeshVisibility("box", 1, 0, 0.3);
      alert("Done");
    },
  },
  mounted() {
    const bjsCanvas = this.$refs.bjsCanvas;
    if (bjsCanvas) {
      myScene.createScene(bjsCanvas);
    }
  },
};
</script>
```

Now we are ready to `npm run serve`, click on the button and after the cube has faded out, we get an alert.

## Where to go next?

Visit our great [Getting started](/features/introductionToFeatures "Getting started") page.

## Links

[All links from this tutorial at one place](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_0/ "All links from this tutorial at one place")

[Part 1](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_1/ "How to use BabylonJS with Vue") of this tutorial

[Part 2](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2/ "How to pass data between BabylonJS and Vue") of this tutorial

[Part 4](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_4/ "BabylonJS and Vue - messages driven scene") of this tutorial

GitHub starter project: https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup

GitHub: https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/async-scene-methods



## Prerequisites

Clone the repo https://github.com/RolandCsibrei/babylonjs-vue-messages-driven-scene and install. Instructions can be found on the repo's home page.

You can also check the application running at https://babylonjs.nascor.tech/scene-director/

## The problem

If you are exposing BabylonJS objects and you are manipulating them directly with Vue, you will sooner or later end up with very low FPS caused by multiple redraws of the scene. The reason is that you mess up something with Vue's reflectivity and things are being called recurrently.

## The solution

Do not expose the BabylonJS objects and send always a copy of your objects in your methods or just simply use `JSON` for your data.

## Choosing JSON?

So do you have to `JSON.stringify` and `JSON.parse` every piece of data you are passing between Vue and BabylonJS? **Yes**, but we can write a class which will help us to do so with minimal effort.

Having everything in JSON opens up new possibilities, so we can leverage a messaging bus for easy data passing between the two frameworks.

## The idea behind messaging

We don't want our Vue code to know about BabylonJS implementation details, we want methods, we can call, which will ensure the required tasks to be done. Let's jump to the example project, it will be easier to follow how the data is passed and received.

## The Marble example

This examples uses Mitt bus (https://github.com/developit/mitt), but you can use any messaging bus. In Vue2 you can use `new Vue()` to create a bus.

![](/img/resources/vue/vue-messages-01.png)

`assets` - you all know
`bus` - the Mitt bus wrappers
`components` - our Vue component which displays the BabylonJS scene
`director` - our layer between Vue and BabylonJS
`scenes` - our BabylonJS scene
`utils` - some utility methods

## The Bus

Now that we can use messaging to communicate between Vue and BabylonJS, how about to have this communication `async`, so for example the method called by Vue can `await` a method, which runs on BabylonJS code. We can simply create an async wrapper around the synchronous bus.

Let's introduce an interface for our message bus. I will show you only the `AsyncBus` implementation. The synchronous bus is pretty much the same. This interface must be implemented by our bus.

![](/img/resources/vue/vue-messages-02.png)

as seen in `AsyncBus.ts` it implements this interface.

![](/img/resources/vue/vue-messages-03.png)

`AsyncBus` is just a facade and uses the Mitt bus under the hood, but adds asynchronicity to our messaging.

## The Scene Director

The Scene Director is a simple method-call-to-message converter, so your Vue code calls code on the `SceneDirector` which creates message(s) and sends it(them) using our `AsyncBus` and as far as our BabylonJS scene is interested in a message, (it is subscribed to process a particular message, basically at low level this is calling `Mitt.$on(messageType, callback)`, it gets executed. When the execution finishes, the BabylonJS scene have to notify the Scene Director, that it has finished execution. The Scene Director `awaits` for every send message with a response message with the specific message type of `SceneDirectorEventBusMessages.SceneDirectorCommandFinished` with additional information about the executed command, including the return value in `payload`. Don't worry there are helpers methods and the usage is very easy.

Let's jump to Vue!

## Vue page

This example uses `App.vue` for the whole UI, but you should not put everything here and it is a good idea to have a `router` at hand and of course use pages/layouts/views/components for better modularity of your project.

![](/img/resources/vue/vue-messages-04.png)

First of all you have to import our `SceneDirector` class and create an instance so you can call it's methods.

![](/img/resources/vue/vue-messages-05.png)

The example application comes with three methods. As you can see, all methods are `async`. I marked some `void`, because I just don't want to `await` methods returning `void` for now. However the `getMeshnames` method has a return type of `string[]` and I am interested in the result, so I must use `await` here.

## Scene Director methods

Ok, so let's se our method implementation in the Scene Director.
![](/img/resources/vue/vue-messages-06.png)

All we do here is calling a helper method called `asyncCommand`

![](/img/resources/vue/vue-messages-07.png)

where we need to specify the message type and if we have something to send, the `payload`.

## Message types

We have to specify, what messages are we going to send through our bus, so we have this:

![](/img/resources/vue/vue-messages-08.png)

There are two types of messages, just for better readability, you can put them under one enum if you like so. `SceneDirectorEventBusMessages`, these are sent by Vue towards BabylonJS and obviously the second one is moving from BabylonJS towards Vue.

It is a good idea not to create a message type for every single action, for example you are not going to create a message `LookLeft` and a `LookRight`, but you will create a message `LookAt` and call it with a parameter, however in your `SceneDirector` you can have two separate methods, so Vue just calls `LookLeft` or `LookRight` and the `SceneDirector` send a message `LookAt` with a parameter \{ rot: - Math.PI / 2 \} or \{ rot: Math.PI / 2 \} which will set the cameras `alpha` for example.

## BabylonJS scene

You simply register your message subscriptions by modifying this method:
![](/img/resources/vue/vue-messages-09.png)
So it maps message types to functions.

Let's have a look at the functions:
`addMarble` adds a new marble (maybe atoms should be a better name, just look at the page screenshot below)

![](/img/resources/vue/vue-messages-10.png)
As seen on the screenshot above, every mapped method receives a command. The `payload` stuff has to be clear for all of you, if not, you can access the `payload` sent by the `SceneDirector` here, in our case the `name` of the marble.

`addMarbleByName` just does this:

![](/img/resources/vue/vue-messages-11.png)

The very important thing here is to call `this.commandFinished(sceneDirectorCommand)` after you method has finished. If you started an animation and want to wait for it, no problem, just call `this.commandFinished(sceneDirectorCommand)` in your animation end callback.

If you want to send a message towards Vue, you can use

![](/img/resources/vue/vue-messages-12.png)

where `this.emitCommand` is just a helper method

![](/img/resources/vue/vue-messages-13.png)

and don't forget to register your message in `SceneDirector` (`MySceneDirector` in our example)

![](/img/resources/vue/vue-messages-14.png)

Unregistering events is a must also :) Just take your time :slight_smile:

## Vue ref

In `App.vue` we can `use` some data from the `SceneDirector`

![](/img/resources/vue/vue-messages-15.png)

what is a simple `ref`:

![](/img/resources/vue/vue-messages-16.png)

and whenever a `MarbleSelected` message arrives we just set the ref's `value`

![](/img/resources/vue/vue-messages-17.png)

**You should always prefer loosely coupled architecture of your solution, so you would rather use a callback instead of ref so you don't have to reference any Vue object in SceneDirector**. That way you could change Vue for any other framework and you don't have to rewrite any BJS related method. The Vue `ref` is used here just as an example of how to use refs. However if you are going to stick with Vue, `ref` is the way.

## The example app

![](/img/resources/vue/vue-messages-18.png)

The app creates 40 marbles on startup. You can add a marble by entering its name to the text input and hit Add marble. Remove marbles will remove some of the marbles with each click. The last button will query the scene for all mesh names in the scene and will print it out to the console. The methods are described above in the ##Vue page## section.

## WebWorkers

So we have a message drive scene?! You can easily move your BabylonJS scene to a WebWorker!! Or you can control your scene by external messages, for example a light sensors can deliver messages for controlling `light.intensity` on BabylonJS lights...

## Message flow logged in the console

Example of a `getMeshNames` message flow from the `SceneDirector` to `MarbleScene` and back to `SceneDirector` and finally gets `console.logged` in `App.vue`

![](/img/resources/vue/vue-messages-19.png)

## Links

You can find a quick prototype using this technique running here https://babylonjs.nascor.tech/scene-director/

Source code repository using Vue3 is at https://github.com/RolandCsibrei/babylonjs-vue-messages-driven-scene

[All links from this tutorial at one place](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_0/ "All links from this tutorial at one place")

[Part 1](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_1/ "How to use BabylonJS with Vue") of this tutorial

[Part 2](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2/ "How to pass data between BabylonJS and Vue") of this tutorial

[Part 3](/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_3/ "BabylonJS and Vue - async scene methods") of this tutorial



Descriptions of how to use VUE with BabylonJS



![VRM top header](/img/resources/babylonjs_and_vrm/vrm_topheader.png)

## What is VRM?

> “VRM” is **a file format for handling 3D humanoid avatar (3D model) data for VR applications**. It is based on glTF2.0. Anyone is free to use it.
>
> In addition, a standard implementation ([UniVRM](https://github.com/vrm-c/UniVRM)) in c## that can import and export VRM file in [Unity](https://unity3d.com/) is released as open source.

Additional information can be viewed at [vrm.dev](https://vrm.dev/en/).

## How to load VRM file in Babylon.js?

You can load VRM file in Babylon.js that uses [babylon-vrm-loader](https://github.com/virtual-cast/babylon-vrm-loader), which is community-madeBabylon.js glTF Loader Extension for `VRM`.

It supports `.vrm` and `.vci` file loading.

## A brief example

PG: <Playground id="#K5W35Y" title="VRM" description="Example of loading a VRM file."/>

## What can do?

For example, once write some animation code, all VRM models can animate it!

![VRM Same Code Animation](/img/resources/babylonjs_and_vrm/vrm-samecode-animation.gif)

```javascript
// example code
vrmManager.humanoidBone.leftShoulder.rotationQuaternion = Quaternion.FromEulerAngles(Math.sin((Math.PI / 4) * (elapsedTime / 200)), 0, Math.PI / 3.5);
vrmManager.humanoidBone.rightShoulder.rotationQuaternion = Quaternion.FromEulerAngles(Math.sin(Math.PI + (Math.PI / 4) * (elapsedTime / 200)), 0, -Math.PI / 3.5);
vrmManager.humanoidBone.leftUpperLeg.rotationQuaternion = Quaternion.FromEulerAngles(Math.sin((Math.PI / 4) * (elapsedTime / 200)), 0, 0);
vrmManager.humanoidBone.rightUpperLeg.rotationQuaternion = Quaternion.FromEulerAngles(Math.sin(Math.PI + (Math.PI / 4) * (elapsedTime / 200)), 0, 0);
vrmManager.humanoidBone.leftLowerLeg.rotationQuaternion = Quaternion.FromEulerAngles(-Math.PI / 6, 0, 0);
vrmManager.humanoidBone.rightLowerLeg.rotationQuaternion = Quaternion.FromEulerAngles(-Math.PI / 6, 0, 0);
```

BabylonJS [standard animation mechanism](/features/featuresDeepDive/animation/animation_introduction) also can be used.

For instance, you can make pose to any VRM.

PG: <Playground id="#K5W35Y#8" title="VRM" description="Posing the VRM"/>

## How to use?

On browser example is [here](https://codepen.io/anon/pen/zQXyxL?editors=1010).

Example PG: <Playground id="#K5W35Y" title="VRM" description="Example VRM"/>

On npm/yarn with webpack...

```bash
$ npm install --save @babylonjs/core @babylonjs/loaders babylon-vrm-loader
## or
$ yarn add @babylonjs/core @babylonjs/loaders babylon-vrm-loader
```

```javascript
import * as BABYLON from "@babylonjs/core";

// has side-effect
// ref. https://webpack.js.org/guides/tree-shaking#mark-the-file-as-side-effect-free
import "babylon-vrm-loader";

// vrmFile is File object retrieved by <input type="file">.
const scene = await BABYLON.LoadSceneAsync("file:" + vrmFile, engine);
const vrmManager = scene.metadata.vrmManagers[0];

// Update secondary animation
scene.onBeforeRenderObservable.add(() => {
  vrmManager.update(scene.getEngine().getDeltaTime());
});

// Model Transformation
vrmManager.rootMesh.translate(new BABYLON.Vector3(1, 0, 0), 1);

// Work with HumanoidBone
vrmManager.humanoidBone.leftUpperArm.addRotation(0, 1, 0);

// Work with BlendShape(MorphTarget)
vrmManager.morphing("Joy", 1.0);
```

## External

- [vrm.dev](https://vrm.dev/en/)
- [virtual-cast/babylon-vrm-loader: GitHub](https://github.com/virtual-cast/babylon-vrm-loader)
- [vrm-c/UniVRM: GitHub](https://github.com/vrm-c/UniVRM)
- [Loading VRM Humanoid-based model - Demos and projects - Babylon.js Forums](https://forum.babylonjs.com/t/loading-vrm-humanoid-based-model/4980/8)
