
## This tutorial

[Part 1: How to use BabylonJS with Vue](/workflow/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"](/workflow/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](/workflow/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_3/ "BabylonJS and Vue - async scene methods")

[Part 4: BabylonJS and Vue - messages driven scene](/workflow/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/start "Getting started")

[The BabylonJS GUI](/features/divingDeeper/gui/gui "BabylonJS GUI")

[The BabylonJS Inspector not just for debugging](/toolsAndResources/tools/inspector "BabylonJS Inspector")

[Installing BabylonJS - ES6 tutorial](/workflow/packages/treeShaking "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

[Offical Vue 2 installation page](https://vuejs.org/v2/guide/installation.html "The offical Vue 2 installation page")

[Official Vue 2 Components Basic page](https://vuejs.org/v2/guide/components.html "Vue 2 Components Basics")

## Vue 3 related

[Offical Vue 3 installation page](https://v3.vuejs.org/guide/installation.html "The foffical Vue 3 installation page")

[Official Vue 3 Components Basic page](https://v3.vuejs.org/guide/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



This section shows you nifty extensions that allow you to add Babylon.js to WordPress.

![Wordpress](https://s.w.org/style/images/about/WordPress-logotype-simplified.png)


## Babylon.js and Wordpress 

Currently there are 2 implementations of Babylon.js into Wordpress: **Babylon Viewer 3D Wordpress** plugin and **BabylonPress 3D Wordpress** plugin. One of the main tasks of these plugins – is to make the web publishing of a 3D content much easier than ever before.

Babylon Viewer 3D Wordpress plugin is based on Babylon Viewer extension. It is intended mainly for simple cases like 3D model demonstration with the help of the shortcode. You will find more detailed info about Babylon Viewer 3D Wordpress plugin in its section below or [just download it from GitHub](https://github.com/eldinor/babylon-wordpress-plugin "download  from GitHub") with included readme.md file.

The second plugin, BabylonPress 3D Wordpress, allows you to publish the examples from [Babylon.js PlayGround](https://playground.babylonjs.com/ "Babylon.js PlayGround") at your Wordpress website. 

It is more complicated but it has more options and gives more freedom to developers and 3D artists, who are now able to easily publish their 3D content at Wordpress-driven site. 

Basically the process is as simple as copying/pasting the code from a Babylon.js PlayGround, and choose several options. You can not only use the PlayGround but also any environment to produce necessary .js code.

BabylonPress 3D Wordpress plugin is in an active development stage; the first alpha release is planned at January 2021 and will be published at GitHub as an open source project.

You may see BabylonPress 3D Wordpress plugin in action at demo site at https://babylonpress.org/ 

More detailed info will follow.

### Babylon Viewer 3D Wordpress Plugin

Babylon Viewer 3D Wordpress plugin automatically provides a default viewing experience for 3D models. All aspects of this experience are configurable. 

It allows you to display 3D models and 3D scenes with the help of shortcode 

`[babylon]URL-OF-3D-FILE[/babylon] `

to use the 3D Viewer in Wordpress posts and pages, Woocommerce products, Elementor blocks etc. 

Just load a 3D model (or use an external one), put its URL into the shortcode and save your post or page – that's all!

Supports GLTF, GLB, STL, OBJ+MTL and BABYLON files upload and demonstration.

If you need more control, you may use the:

`<babylon></babylon>`

tag in any Wordpress HTML block and configure all needed parameters (light, camera position, camera behaviour, rotating etc). See [Configuring Babylon.js Viewer](https://doc.babylonjs.com/toolsAndResources/babylonViewer/configuringViewer "Configuring Babylon.js Viewer") for more information on customizing the viewing experience.

There are other possible options and configurations (like loading a model from .json file). For all questions regarding Babylon Viewer configuration please refer to the corresponding sections of the [Viewer documentation](https://doc.babylonjs.com/toolsAndResources/babylonViewer "Viewer documentation").

Babylon Viewer 3D Wordpress plugin is designed to be as straight forward and minimal as possible just to allow for Babylon Viewer extension to work. It doesn’t save any data in the Wordpress database. All settings are configured in the DOM exactly as if you would use original Babylon Viewer extension.

If you have problems with Babylon Viewer 3D Wordpress plugin, please create an issue at [GitHub project page ](https://github.com/eldinor/babylon-wordpress-plugin "GitHub project page ") or ask advice in [forum thread](https://forum.babylonjs.com/t/babylon-viewer-3d-wordpress-plugin-version-0-3-major-update/15004 "forum thread").




## 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 possibilites, 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 interace.

![](/img/resources/vue/vue-messages-03.png)

`AsyncBus` is just a facade and uses the Mitt bus under the hood, but adds asynchronousity 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 notiy the Scene Director, that it has finished execution. The Scene Director `awaits` for every send messagwe 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 throught our bus, so we have this:

![](/img/resources/vue/vue-messages-08.png)

There are two types of messages, just for better readibility, you can put them under one enum if you like so. `SceneDirectorEventBusMessages`, these are sent by Vue towards BabylonJS and obviosly 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 it's name to the text input and hit Add marble. Remove marbles will remove some of the marbles by each click. The last button will query the scene for all the meshe names on 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 finaly 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](/workflow/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_0/ "All links from this tutorial at one place")

[Part 1](/workflow/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_1/ "How to use BabylonJS with Vue") of this tutorial

[Part 2](/workflow/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2/ "How to pass data between BabylonJS and Vue") of this tutorial

[Part 3](/workflow/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 at one place

This tutorial

A real app using Typescript, Vue 2 with Composition API, mobile friendly Quasar based GUI

BabylonJS official documentation

Abstract

Vue 2 related

Vue 3 related

GitHub

Vue 2 related

Vue 3 related

Typescript, Vue2, Composition API, Quasar