Comments (7)
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.
from vue-babylonjs.
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?
from vue-babylonjs.
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
from vue-babylonjs.
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!
from vue-babylonjs.
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 thev-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 aproperties
object. This is because all of the naming of objects in the scene is handled by this library, by using theproperties
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.
from vue-babylonjs.
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! :)
from vue-babylonjs.
@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.
from vue-babylonjs.
Related Issues (20)
- can't load gtlf model HOT 3
- Two Issues with <camera>. It changes the colour of the object & props not working on <asset> by not having <camera>. HOT 2
- Hot Reload often breaks Animation HOT 1
- Loading multiple 3d models to the canvas and assign clickable events HOT 1
- GUI HOT 4
- Add a ready event for asset component / Compile error HOT 3
- PolygonMesh example
- OBJ files uploader HOT 1
- Rotating mesh around its local axis
- Cannot split scene into a separate component (ERR: too much recursion!)
- Cannot import library for testing HOT 1
- Documentation API needs more to be added HOT 1
- Does Not Run on Mobile HOT 1
- Creating Ribbon - path[j].subtract function not found
- Obj assets load textures
- Opening an Obj File with material and Texture from base64 string
- a button with onPointerUpObservable need to be pressed two times
- Port to Vue3? HOT 1
- About supported languages for development documentation
- why Asset tag is not supporting separate mtl file for obj, we can improve it by minicking from janusvr
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-babylonjs.