
## 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



CesiumJS is an open source JavaScript library for creating world-class 3D globes and maps with the best possible performance, precision, visual quality, and ease of use. Because both BabylonJS and CesiumJS render 3D scenes with JavaScript, it is possible to integrate them for a better visual effect.

Inspired by [Integrating Cesium with Three.js](https://cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/), this solution renders the two libraries on two canvases, with the upper canvas used for BabylonJS. Set the upper canvas to `pointer-events: none;` so CesiumJS keeps control, then make BabylonJS's camera follow CesiumJS's camera.
## Setup CesiumJS
```javascript
const LNG = -122.4175, LAT = 37.655;

const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
    useDefaultRenderLoop: false
});

viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(LNG, LAT, 300),
    orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-90.0),
    }
});

// get these two points for later setup of BabylonJS root node.
const base_point = cart2vec(Cesium.Cartesian3.fromDegrees(LNG, LAT, 50));
const base_point_up = cart2vec(Cesium.Cartesian3.fromDegrees(LNG, LAT, 300));
```

## Setup BabylonJS
The scene's `clearColor` is important; make the background transparent so you can see what is rendered in CesiumJS.
```javascript
const engine = new BABYLON.Engine(canvas);
const scene = new BABYLON.Scene(engine);
scene.clearColor = BABYLON.Color4(0, 0, 0, 0);

const camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene);
```

## Rendering Sequence
Before BabylonJS renders, we should change BabylonJS's camera position and rotation so they exactly match CesiumJS's.
```javascript
function cart2vec(cart) {
    return new BABYLON.Vector3(cart.x, cart.z, cart.y);
}

const fov = Cesium.Math.toDegrees(viewer.camera.frustum.fovy);
camera.fov = fov / 180 * Math.PI;

const civm = viewer.camera.inverseViewMatrix;
const camera_matrix = BABYLON.Matrix.FromValues(
    civm[0 ], civm[1 ], civm[2 ], civm[3 ],
    civm[4 ], civm[5 ], civm[6 ], civm[7 ],
    civm[8 ], civm[9 ], civm[10], civm[11],
    civm[12], civm[13], civm[14], civm[15]
);

// I'm sure it is able to get the result with the matrix directly, but I'm not familiar with matrixs, so you can do it yourselves.:)
const scaling = BABYLON.Vector3.Zero(), rotation = BABYLON.Vector3.Zero(), transform = BABYLON.Vector3.Zero();
camera_matrix.decompose(scaling, rotation, transform);
const camera_pos = cart2vec(transform),
    camera_direction = cart2vec(viewer.camera.direction),
    camera_up = cart2vec(viewer.camera.up);

const rotation_y = Math.atan(camera_direction.z / camera_direction.x);
if (camera_direction.x < 0) rotation_y += Math.PI;
rotation_y = Math.PI / 2 - rotation_y;
const rotation_x = Math.asin(-camera_direction.y);
const camera_up_before_rotatez = new BABYLON.Vector3(-Math.cos(rotation_y), 0, Math.sin(rotation_y));
const rotation_z = Math.acos(camera_up.x * camera_up_before_rotatez.x + camera_up.y * camera_up_before_rotatez.y + camera_up.z * camera_up_before_rotatez.z);
rotation_z = Math.PI / 2 - rotation_z;
if (camera_up.y < 0) rotation_z = Math.PI - rotation_z;

camera.position.x = camera_pos.x - base_point.x;
camera.position.y = camera_pos.y - base_point.y;
camera.position.z = camera_pos.z - base_point.z;
camera.rotation.x = rotation_x;
camera.rotation.y = rotation_y;
camera.rotation.z = rotation_z;
```
CesiumJS must render first because we need its camera parameters.
```javascript
engine.runRenderLoop(() => {
    viewer.render();
    moveBabylonCamera();
    scene.render();
});
```
## Setup root node
This step is not strictly necessary, but it makes things easier.
```javascript
const root_node = new BABYLON.TransformNode("BaseNode", scene);
root_node.lookAt(base_point_up.subtract(base_point));
root_node.addRotation(Math.PI / 2, 0, 0);

// Then you can add your meshes to root_node.
const box = BABYLON.MeshBuilder.CreateBox("box", {size: 10}, scene);
const material = new BABYLON.StandardMaterial("Material", scene);
material.emissiveColor = new BABYLON.Color3(1, 0, 0);
material.alpha = 0.5;
box.material = material;
box.parent = root_node;

const ground = BABYLON.MeshBuilder.CreateGround("ground", {
    width: 100,
    height: 100
}, scene);
ground.material = material;
ground.parent = root_node;
```
## Example
An example can be found here: [cesium-babylonjs](https://github.com/Hypnosss/cesium-babylonjs).


## 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


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

This tutorial

A real app using TypeScript, Vue 2 with the Composition API, and a mobile-friendly Quasar-based GUI

BabylonJS official documentation

Additional reading

Vue 2 related

Vue 3 related

GitHub

Vue 2 related

Vue 3 related

TypeScript, Vue 2, Composition API, Quasar