How to use BabylonJS with Vue - async scene methods
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 cloned the repository from https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup. This is were 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!
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.
<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 page.
Links
All links from this tutorial at one place
Part 1 of this tutorial
Part 2 of this tutorial
Part 4 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