Calling functions inside scene element (template)

[likithkailas]

Hello Brian,
I have implemented following functionalities in the image below using vue-babylon

---

I have a question, all the other functionalities are working except one,

• I have a method called moveMesh( in methods) . it does a interactive movement of mesh in the scene using the mouse. The functionality works well in babylonjs alone (tested) . so where do i need to call this method in the template (inside scene element) to implement this functionality ?

Other functionalities (which are working fine),
moveBox() --> I am able to control mesh movement through slider
rotateBox() --> I am able to control mesh rotation through slider
changecolor() --> I am able to change mesh color through slider

more information: i am trying to implement the mesh movable(drag and drop) functionality as show here : http://playground.babylonjs.com/#279FW9

can you help me with this issue?

[BrainBacon]

It looks to me like you aren't properly getting a reference to the scene. The way you probably want to do it is use the v-model attribute on the Scene component to bind a local data property e.g.:

<template>
  <Scene v-model="scene">
    <!-- scene stuff in here -->
  </Scene>
</template>
<script>
  module.exports = {
    data() {
      return {
        scene: null,
      };
    },

    watch:  {
      scene() {
        // scene is now longer null when this is called
      },
    },
  };
</script>

You'll probably want to wait until the watcher is called to attach your event listeners though.

Another (more complex) way to achieve this is to use the Entity component as a mixin to access this.$scene. Instructions on how to do this is in the Entity documentation.

[likithkailas]

Thanks , that helps, i am able to get scene reference
but mainly i am looking to access engine and canvas object from scene, or is there any way to get it?
i am trying like...
var canvas = this.$scene.getEngine().getRenderingCanvas();

The above doesnt work as getEngine() is a babylonjs API reference.
Can you guide through this mainly?

[BrainBacon]

Are you positive you are actually getting a reference to the scene properly? I was able to retrieve the rendering canvas using the BabylonJS API just fine. Here's how I did it: https://glitch.com/edit/#!/vue-babylonjs-canvas

[likithkailas]

not really, the error was thrown at this.$scene.getEngine(). sorry, my fault, i think my access to scene was wrong, i cross verified it with your example. it's fine now, as it should be this.scene.getEngine().getRenderingCanvas()

I am facing another issue ,
i am also trying to get ground and camera reference into scene( ) watcher, but getting null
(tried using name attribute and also using property as in property documentation)
please find the code on the glitch platform:
https://glitch.com/edit/#!/vue-babylonjs
glitch.com/edit/#!/join/ff508740-1aab-4550-90dc-c9ec6f9fecce
(link to invite to edit)
could you let me know whats the mistake

Thanks for much needed support!

[BrainBacon]

I looked at your example and it doesn't seem like you're understanding the flow of how the elements are being created. Although it is partially my fault because I don't think the docs do a great job of explaining the lifecycle of these elements.

The reason you're having difficulty here is because you're doing everything inside the scene watcher when none of the other components have been created yet. You also have v-model references to the ground and camera, but you're not using them. What I would recommend is adding watchers for ground and camera and finally move all your logic to a method instead of doing it all in your scene watcher.

Here is an example:

<template>
  <Scene v-model="scene">
    <Camera type="arcRotate" v-model="camera"></Camera>
    <PointLight :position="[0, 2, -1]"></PointLight>
    <Box :position="[0, 0, 5]"></Box>
    <Ground v-model="ground" :options="{width:100, height:100}">
      <Material diffuse="#F00"></Material> 
    </Ground>
  </Scene>
</template>
<script>
  export default {
    data() {
      return {
        scene: null,
        ground: null,
        camera: null
      };
    },
      
    watch: {
      ground() {
        this.active();
      },

      camera() {
        this.active();
      },
    },

    methods: {
      active() {
        if (this.ground && this.camera) {
          // this.scene, this.camera, and this.ground are all available now
        }
      },
    },
  };
</script>

A couple of additional notes regarding your code:

• I do not recommend the use of scene.getMeshByName() since the v-model functionality already provides a reference to meshes defined within the template. Using other means to get references to objects in the scene is breaking out of the virtual DOM implementation of this libarary. While not entirely destructive it may lead to undefined behavior since this library handles the lifecycle of the 3D scene.
• Use the name attribute on components rather than inside of a properties object. This is because all of the naming of objects in the scene is handled by this library, by using the properties object you are being overwritten with the default naming system. However, in a majority of cases this should be unnecessary because names are traditionally used in Babylonjs to refer to objects already in the scene and as previously stated there are systems in place to obtain references through the Vue template.

I am starting to realize that I should probably put a help needed discussion board together somewhere as this board should really only be for but reports and feature requests. Unfortunately I can't dedicate a whole lot of time to helping people understand concepts within Vue and Babylonjs. However, with that being said there is a lot that can be done within documentation to make the learning process easier. So, I am going to close this now since there doesn't seem to be any issues with the library itself, but feel free to open an issue or pull request if something isn't clear in the documentation or you are sure you found a bug.

[likithkailas]

Yes, the question was completely irrelevant or nothing to do with vue-babylonjs issues here. Myself being a beginner in vuejs accelerated me to post more of my unnecessary queries. I have tried more in babylonjs framework alone and wanted to implement same features in vue-babylonjs because of vue's cool features. I would ask for more documentation or examples on how to use attributes (mainly babylonjs objects) in vue-babylonjs. Please consider this as feedback. The last two comments of your's were really helpful.
Thanks again. ! I would like to still explore this framework! :)

[BrainBacon]

@likithkailas I have released a new version of the plugin that includes a new event on components in this library called complete that will fire when all children of that component are initialized and would be bound to your models. There's an example in the Observable documentation for you to check out.