
## 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 the Composition API, and a 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/inspectorv2 "BabylonJS Inspector")

[Installing BabylonJS - ES6 tutorial](/setup/frameworkPackages/es6Support "Installing BabylonJS - ES6 tutorial")

## Additional reading

[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, Vue 2, 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 set up a minimal 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 to learn how to set up 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 installed correctly and can run without errors. If you've created the Vue app using the Vue CLI, you can start your app by running `npm run serve` in your Vue app directory.

The goal of this tutorial is to show how to connect the two frameworks together, not how to use these frameworks on their own. You need to be familiar with both frameworks at a basic level to get started.

After installing and testing your Vue app, you should end up with a very similar directory structure for both Vue 3 and Vue 2:
![New Vue project directory structure](/img/resources/vue/bjs-vue-doc-1.webp)

## 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/inspectorv2 "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 that 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 through the `this.$refs` object in the `mounted()` callback. This is explained below for Vue 2.

In Vue 2, the `template` must have only one root element, so it is a good idea to wrap our `canvas` in a `div` element. This lets us add new elements to 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 in a separate file so we can use it anywhere.

Open `src/App.vue`, remove the `HelloWorld.vue` component completely, 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 upper-left corner.

## Async scene

Sooner or later, you will need to create a scene that uses asynchronous functionality. It is very easy to set up 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, which will dramatically degrade performance. As a rule of thumb, never make the BabylonJS `Engine` or `Scene` object reactive. If you suspect such behavior, test your scene without Vue.

## Conclusion

It is easy to set up 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 a time 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 have 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—our animation, in this case—finishes.

## Prerequisites

The goal of this tutorial is to show how to connect the two frameworks together, not how to use these frameworks on their own. You need to be familiar with both frameworks at a 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 while 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 at https://github.com/RolandCsibrei/babylonjs-vue-messages-driven-scene and install it. 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 expose BabylonJS objects and manipulate 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 interfere with Vue's reactivity and things get called repeatedly.

## The solution

Do not expose BabylonJS objects, and always send a copy of your objects in your methods, or 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 that ensure the required tasks are 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 example uses the Mitt bus (https://github.com/developit/mitt), but you can use any messaging bus. In Vue 2, you can use `new Vue()` to create a bus.

![](/img/resources/vue/vue-messages-01.webp)

`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 making this communication `async`, so that, for example, a method called by Vue can `await` a method running in 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.webp)

as seen in `AsyncBus.ts` it implements this interface.

![](/img/resources/vue/vue-messages-03.webp)

`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. Your Vue code calls methods on the `SceneDirector`, which creates messages and sends them using our `AsyncBus`. As long as our BabylonJS scene is interested in a message (that is, it is subscribed to process a particular message—basically, this calls `Mitt.$on(messageType, callback)` at a low level), it gets executed. When execution finishes, the BabylonJS scene has to notify the Scene Director that it has finished. The Scene Director `awaits` every sent message by listening for a response with the specific message type `SceneDirectorEventBusMessages.SceneDirectorCommandFinished`, along with additional information about the executed command, including the return value in `payload`. Don't worry—there are helper 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.webp)

First of all, you have to import our `SceneDirector` class and create an instance so you can call its methods.

![](/img/resources/vue/vue-messages-05.webp)

The example application comes with three methods. As you can see, all methods are `async`. I marked some methods as `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 see our method implementation in the Scene Director.
![](/img/resources/vue/vue-messages-06.webp)

All we do here is call a helper method called `asyncCommand`.

![](/img/resources/vue/vue-messages-07.webp)

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 we are going to send through our bus, so we have this:

![](/img/resources/vue/vue-messages-08.webp)

There are two types of messages. This is just for better readability—you can put them under one enum if you like. `SceneDirectorEventBusMessages` are sent from Vue to BabylonJS, and obviously the second one moves from BabylonJS toward 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 `LookLeft` message and a `LookRight` message. Instead, you will create a `LookAt` message and call it with a parameter. However, in your `SceneDirector` you can still have two separate methods, so Vue just calls `LookLeft` or `LookRight`, and the `SceneDirector` sends a `LookAt` message with a parameter like \{ rot: - Math.PI / 2 \} or \{ rot: Math.PI / 2 \}, which will set the camera's `alpha`, for example.

## BabylonJS scene

You simply register your message subscriptions by modifying this method:
![](/img/resources/vue/vue-messages-09.webp)
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.webp)
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.webp)

The very important thing here is to call `this.commandFinished(sceneDirectorCommand)` after your 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.webp)

where `this.emitCommand` is just a helper method.

![](/img/resources/vue/vue-messages-13.webp)

and don't forget to register your message in `SceneDirector` (`MySceneDirector` in our example)

![](/img/resources/vue/vue-messages-14.webp)

Unregistering events is also a must :) 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.webp)

what is a simple `ref`:

![](/img/resources/vue/vue-messages-16.webp)

and whenever a `MarbleSelected` message arrives, we just set the ref's `value`.

![](/img/resources/vue/vue-messages-17.webp)

**You should always prefer a loosely coupled architecture for your solution, so you would rather use a callback instead of a ref and avoid referencing any Vue object in SceneDirector**. That way, you could replace Vue with any other framework and would not have to rewrite any BJS-related method. The Vue `ref` is used here only as an example of how to use refs. However, if you are going to stick with Vue, `ref` is the way to go.

## The example app

![](/img/resources/vue/vue-messages-18.webp)

The app creates 40 marbles on startup. You can add a marble by entering its name in the text input and clicking Add marble. The Remove marbles button will remove some of the marbles with each click. The last button will query the scene for all mesh names and print them to the console. The methods are described above in the ##Vue page## section.

## WebWorkers

So we have a message-driven scene?! You can easily move your BabylonJS scene to a WebWorker!! Or you can control your scene with external messages—for example, 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`, where it finally gets `console.logged` in `App.vue`:

![](/img/resources/vue/vue-messages-19.webp)

## 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.webp)

## 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 files 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 a VRM file in Babylon.js?

You can load a VRM file in Babylon.js by using [babylon-vrm-loader](https://github.com/virtual-cast/babylon-vrm-loader), which is a community-made Babylon.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 you do?

For example, once you write some animation code, all VRM models can use it!

![VRM Same Code Animation](/img/resources/babylonjs_and_vrm/vrm-samecode-animation.webp)

```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) can also be used.

For instance, you can apply a pose to any VRM.

PG: <Playground id="#K5W35Y#8" title="VRM" description="Posing the VRM"/>

## How to use?

A browser example is available [here](https://codepen.io/anon/pen/zQXyxL?editors=1010).

Example PG: <Playground id="#K5W35Y" title="VRM" description="Example VRM"/>

For 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)


Vue

Coming next

How to pass data between BabylonJS and Vue

How to pass data between BabylonJS and Vue.

How to use BabylonJS with Vue

How to integrate BabylonJS into a Vue application.

How to use BabylonJS with Vue - async scene methods

How to integrate BabylonJS into a Vue application.

How to use BabylonJS with Vue - messages driven scene

How to integrate BabylonJS into a Vue application and use a messaging bus to pass data between the two frameworks

How to use BabylonJS with Vue - all the links from this tutorial in one place

How to integrate BabylonJS into a Vue application.