I want to build a file uploader (obj, mtl, etc.) but access files directly in the browser using the FileReader API instead of sending it to a server and retrieve it from there again with the <Asset src='..'> component.

Regarding functionally this is probably very similar to this project: https://3dviewer.net/#

Now... this seems to be a good starting point. I have a very simple MWE that writes the content of an uploaded obj file to a data variable objtext but I have no idea how to load this into the Scene.

<template>
  <div>
  <file-reader @load="objtext = $event"></file-reader>
    <Scene v-model="productScene">
      <Property name="clearColor"
                color="#fff" />
      <Camera v-model="camera"
              :radius="2500"
              type="arcRotate" />
    </Scene>
  </div>
</template>


<script>
import FileReader from './FileReader.vue';

export default {
  name: 'Upload',
  components: {
    FileReader
  },
  data () {
    return {
      productScene: null,
      camera: null,
      objtext: ''
    }
  },
  watch: {
    objtext () {
      const scene = this.productScene
      // Add objtext to scene
      this.BABYLON.SceneLoader.Append('', 'data:' + this.objtext, scene, function () {
        scene.createDefaultCamera(true, true, true)
      })
  }
}
</script>

My filereader looks like:

<template>
  <div>
    <label class="text-reader">
      <input type="file"
             @change="loadTextFromFile">
    </label>
  </div>
</template>

<script>
export default {
  methods: {
    loadTextFromFile (ev) {
      const file = ev.target.files[0] // now it only holds one file
      const reader = new FileReader()

      reader.onload = e => this.$emit('load', e.target.result)
      reader.readAsText(file)
    }
  }
}
</script>

npm audit reveals 11 vulnerabilities. Look into breaking changes, and report potential issues here.

Home page is hard for a new user to understand what the library is. Possible modifications could be moving the "Getting Started" information to a separate page and making the home page a way to quickly and easily understand the applications and importance of the library. The home page should act as marketing for the product itself, so that people will use it. Assume the person on the page doesn't already know what the project is.

Hi,
I got this error:
'Physics' was not found in 'vue-babylonjs'

The BabylonJs changed?

Hi,

I load a model (STL file), but it's only displayed when I resize the browser window. I inspected the elements and saw that the canvas height is 0 intially, although I set the width to 100% and the height to 100em.

Thanks,
Markus

Can anyone give me an example of a ploygonmesh in vue-babylonjs? (just the short code)

where do i put my vector2 corners?
i cant seem to wrap my head around it..

many thx in advance

we tried making an animation on the material component and it didn't work. Instead we had to make it a child of mesh

I'm reading in the documentation that the options object is not reactive.
So, i have 3 vue props: height, width, depth, how can I bind them to a babylon box component in a reactive manner?
Thanks a lot for getting this basic sample working.

Sorry this is not a normal issue but I have to write it. :)

I have to say big thanks (1000x1000x1000 Thanks) for the creator!

I have started to play with this library and I love it.

I have just installed in my project (mosaic builder) and a NEW WORLD have opened for me!

my hobby page: https://mosaictool.mosaicpic.com/babylon

I am big Minecraft fan. I love walk in a virtual world.

Thanx.

Hello,

I tried vue-babylonjs animation component yesterday and when I changed the mode to constant or/and the loop to false, it does not seem to stop the animation loop...

Anybody experienced the same problem?

Just as an example:

at https://doc.babylonjs.com/how_to/how_to_use_edgesrenderer there's code to call enableEdgesRendering() on a primitive.

I've tried using properties, e.g.

but that didn't work.

Any other suggestions?

I started my project with the new vue-cli builder (it'd be great to have a template for vue-babylonjs to help getting started easier).

Anyway, since I set my project up with TypeScript, I'm having trouble importing vue-babylonjs in my main.ts file:

Could not find a declaration file for module 'vue-babylonjs'. 'node_modules/vue-babylonjs/dist/umd.js' implicitly has an 'any' type.

Because of that I think I'm not importing the lib correctly, I tried just Vue.use(require('vue-babylonjs')); instead, but am getting an error of Unknown custom element: <Scene> when I load my component/page.

Any advice? Thanks!

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?

Hello,
I would like to load assets (.stl files) uploaded by users (so the origin of the file might not coincide with the centre of the mesh object): Is there a way to calculate the Bounding Box of a mesh (or more meshes ideally) and set its center as the target for the ArcRotate camera?

In BabylonJS I would use something like: mesh.getBoundinfo().boundingSphere.centerWorld

Thank you!

Hi there!
I have a question: do you have a recommended way for working with pointer events and observables?
I am not sure if it is already possible with the current implementation. I was playing around a bit and i got something working, but i had to add some modifications to the implementation of lib/scene.

In case this is missing, I could work some more on it and open a PR. I would be happy to discuss a strategy on how this could be implemented in a nice way.

Thank you anyway, nice work!

This issue will serve as a mailing list for important updates. Feel free to subscribe for notifications.

Hi,

Great library, works perfect, but I cant load a gtlf model.
I'm getting something like this in the console
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

can anyone please help?

It would be great to have an example on the real reactivity power of the vue with babylonjs combination.
E.g. 3 sliders (or similar control in vue) for x, y, z position and a 3D object in babylonjs. While the object is moved, the sliders are updated. While a slider thumb moves, the 3D object also moves along the respective axis.
Similarly for zooming.

Hi,
First at all, great job with this library!

I'm trying to create a WebVRFreeCamera but it iseems that is not currently available as a vue component (or I'm not finding it), so I've tried creating it using the standard BABYLON.WebVRFreeCamera from the scene watch:

watch: {
      myScene () {
        // myScene is now available from the component
        // do something with it here or call a method to use it from here
        this.BABYLON.WebVRFreeCamera('vrcam0', new this.BABYLON.Vector3(0, 0, 0), this.myScene)
      },
}

but is returning an error: ' Cannot add property state, object is not extensible' on the Babylonjs 'Node' parent of the camera.

This, obviously, happens even creating just a Node or a Light but doesn't seems to happen on a Mesh, using:

this.BABYLON.Mesh('boop', this.myScene)
or
this.BABYLON.MeshBuilder.CreateBox('box', {height: 5}, this.myScene)

So the real question is, what am i doing wrong? :)

Thanks in advance

I can add dragabble "property" (:dragable="yes") on the Box of the template?
pseudo code:

Or I need add something to the <script>

I am interested in every solution.

When user chooses to view HTML or Pug code for one example, their choice should persist when viewing other examples on other pages.

I try to access GizmoManager through BABYLON.GizmoManager but get an exception. Checking the BABYLON object confirms Gizmo related classes are not visible.

I assume this may be related to "build time / run time" challenges and that Gizmo did not exist when the downloaded vue-babylonjs package got built. Is that correct? If not, is there a way to access Gizmo?

Looking for a way to do this animation with Vue..
here is an example using vanilla js: https://www.babylonjs-playground.com/#2SN4VZ#6
or this one: https://www.babylonjs-playground.com/#IW99H0#7

I think there is a way to use the given props with assistance of using observables here:

The SpotLight is not showing up when used.

Context

I'm experimenting with vue-babylonjs as basis for a live visuals programming workflow. The idea is to run a development server (webpack-dev-server with vue-loader), visit the it once (in a while) with the browser, then edit the code, save and have hot reload update (parts of) the scene graph.

As this is probably not your intended workflow I wasn't expecting much to be working out of the box, but found it doing quite all right. One component that breaks though is Animation.

What happens is: I visit the page with a scene graph with an animation, the scene loads and animation animates. I then edit the animation node, e.g. change :duration value and save the file. Hot reload figures out what has changed, adjusts the Animation node and more often than not something will go wrong: either the animation runs but with corrupted state (e.g. rotation would seem to restart before the end value is reached) or the animation runs once but ends up throwing

TypeError: endKey is undefined ... chunk-vendors.js line 131 > eval:521:17
    _interpolate animation.js:511
    animate runtimeAnimation.js:510
    _animate animatable.js:361
    _animate animatable.js:409
    animate scene.js:3120
    render scene.js:3153
    setScene esm.js:18554
    _renderLoop engine.js:1371
    <anonymous> self-hosted:869

Reloading the page in the browser starts the scene graph with the new settings and without issues. I think the problem has to do with how Hot Reload attempts to update the DOM and how Vue-BabylonJS then virtually attempts to "propagate" the update to the scene graph. But I don't know enough about how vue and vue-babylonjs work underneath to understand what goes wrong exactly.

Minimally Reproducible Example

The minimal component I'm experiencing this problem with is here, and the whole project

To Reproduce
Steps to reproduce the behavior:

1. Start the development server with e.g. yarn serve
2. Visit http://localhost:8080/
3. Wait for the cube to start rotating
4. Edit the HotAnimationIssue.vue, changing duration to some other value
5. Wait for the exception to be raised (animation stops)

Expected behavior
Animation continues with new settings

Environment (please complete the following information):

• Device: Desktop
• OS: Linux
• Browser firefox
• Version 71

Hello!

I'm having issues trying to apply Babylon Texture Objects onto Materials. The following compiles without errors, but nothing shows:

(in Pug)

...
Box(:options="{width:1000,height:150,depth:5}" :position="[0,0,300]")
                    Material(color="#FFFFFF" reflection="#721ed8")
                        Texture(:value="brickTexture")
                            Property(name="uScale" :float="20")
                            Property(name="vScale" :float="3")
...

I'm trying to reuse a Babylon texture, but it doesn't seem to apply it. I'm defining my texture here:

export default {
    data() {
        return {
            brickTexture: new BABYLON.Texture('/assets/models/Subway_tiles_001_COLOR.jpg')
        }
    },
...

If on this line I set it without the (:) it doesn't work as it thinks is a string, even though it's supposed to be reactive according to the docs. This doesn't work for me:

Texture(value="brickTexture")

I've console.log(brickTexture), and it outputs fine as well.

Any suggestions?

Thanks!
Juan @ PWNK Digital

When a child animation is added to a light, it does not show the animation. This interaction was not intended.

The "More" heading in the navbar should be a link to its subheadings (Github, Updates, Contact info). The subheadings being hidden in the "More" page would make the menu more understandable and help solve the problem of confusion about what page you are on.

I want to load a 3d venue (i.e a large stadium or conference hall) in to my canvas and then depending on the information provided by the backend (grpc + golang server), I would like to dynamically load 3d speaker models in their respective positions. The number of speakers can range from 10 to 2500. I'm able to load multiple speaker models using a nested v-for in Asset. I would like to know the the most optimized way to do this when it comes to rendering large number of 3d models.

      <Asset :src="this.venuePath"></Asset>

      <Asset v-for="array in arrayInfos" :key="array.arrayId">
        <Asset
          v-for="deviceId in array.deviceIdsList"
          :key="deviceId"
          :src="this.speakerPath"
          :scaling="this.speakerScaling"
          :position="deviceInfoForDeviceId(deviceId).position"
        ></Asset>
      </Asset>

But the most concerning problem is to add a clickable event to these loaded 3d models. I would like to be able to click any of the rendered speaker models and display corresponding speaker details on a table next to the 3d view. Appreciate your help. I thought perhaps BABYLON.GUI.MeshButton3D is the way but I cannot figure out how to use it with this library.

Note: I'm using Vue with Typescript in Class based components. So my classes looks like this.

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Getter } from 'vuex-class';
import { IArrayInfo } from '../store/array/types';
import { IDeviceInfo } from '../store/device/types';

import vb from 'vue-babylonjs';
import { Vector3 } from 'vue-babylonjs/classes';
Vue.use(vb);

@Component
export default class View3D extends Vue {
  private venuePath: string;
  private venuePosition: Vector3;
  private speakerPath: string;
  private speakerScaling: Vector3;

  @Getter('arrayInfos', { namespace: 'arrayState' })
  private arrayInfos!: IArrayInfo[];
  @Getter('deviceInfos', { namespace: 'deviceState' })
  private deviceInfos!: IDeviceInfo[];

  constructor() {
    super();
    this.venuePath = `${process.env.BASE_URL}msg_seating_13K.obj`;
    this.venuePosition = [0, 0, 0];
    this.speakerPath = `${process.env.BASE_URL}speakermodule.obj`;
    this.speakerScaling = [0.01, 0.01, 0.01];
  }

  private deviceInfoForDeviceId(deviceId: string): IDeviceInfo {
    for (const deviceInfo of this.deviceInfos) {
      if (deviceInfo.deviceId === deviceId) {
        return deviceInfo;
      }
    }
    return {} as IDeviceInfo;
  }
}
</script>

Thank you:)

When you click the fullscreen button on the sample animations, it will reroute to the home page.

I have followed the installation guide and set everything up. There is one problem however, when I include an Asset into my template which has a src-attribute leading to a local file on my webserver, I get an error message and the asset can not be rendered:

Error message:
Uncaught (in promise) LoadFileError: Error status: 404 Not Found - Unable to load ../StanfordBunny.obj at new LoadFileError (webpack-internal:///./node_modules/@babylonjs/core/Misc/tools.js:94:28) at XMLHttpRequest.onReadyStateChange (webpack-internal:///./node_modules/@babylonjs/core/Misc/tools.js:723:33)

The path itself is correct.

<Asset src="../StanfordBunny.obj" :scaling="[50.5, 50.5, 50.5]" :position="[-1, -7.25, -0.5]" :rotation="[0, Math.PI, 0]"></Asset>

If I include a file from an external path via http(s), everything works fine:
<Asset src="https://www.babylonjs-playground.com/scenes/StanfordBunny.obj" :scaling="[50.5, 50.5, 50.5]" :position="[-1, -7.25, -0.5]" :rotation="[0, Math.PI, 0]"></Asset>

Am I missing something here? Or is this intentional behaviour, and you are not supposed to include assets from your own webserver?

Was trying to use it with vue that comes with laravel. Vue is scaffolded and ready to go. By default it uses require to include modules and so on so I used that from the example and didn't work. used import and it works. It seems that import and require are doing things differently and that makes Vue.use not work.
Found workaround for the moment.

let vb = require('vue-babylonjs');
Vue.use(vb.default);

Hi,

I currently don't have any experience with writing code for libraries (but I do have web development experience), but I am interested in contributing code to this library, are there any good first issues that I can tackle?

I am trying to change the color of the scene to match my website's color. I am not sure what would be the best option of doing that.

I would think of something like this in my methods:

activeScene() {
      if (this.scene !== null) {
        this.scene.clearColor = new this.BABYLON.Color4(0,0,0,0);
} 

I have also tried:

 <Scene v-model="scene">
     <Property name="clearColor" :color="$color(0, 0, 0, 0)"></Property>
  </Scene>

Both of the ways that I have been doing it doesn't seem to work. Not sure if this is a bug or not.

Can you tell me why the shader isn't being applied to my imported model? The model is imported fine, but no shader. Thanks for your time and any help!

<Scene @scene="onScene">
    <Camera type="universal"></Camera>
    <DirectionalLight diffuse="#0F0"></DirectionalLight>
    <HemisphericLight :direction="[100, 0, 100]"></HemisphericLight>
    <PointLight specular="#0F0"></PointLight>
    <SpotLight diffuse="#00F"></SpotLight>
    <Asset
      :src="publicPath"
      :scaling="myAsset.scaling"
      :position="myAsset.position"
      :rotation="myAsset.rotation"
    >
      <Animation property="rotation.y" :springiness="10" :duration="5" :end="Math.PI * 2"></Animation>
      <!-- Use the text content inside Vertex and Fragment components-->
      <!-- Unsafe caching, non-reactive-->
      <!-- USE A UNIQUE VALUE IN THE "name" PROPERTY FOR SAFE CACHING-->
      <!-- only recommended for prototyping-->
      <Shader name="silver_lake">
        <Vertex>
          precision highp float;

          // Attributes
          attribute vec3 position;
          attribute vec3 normal;
          attribute vec2 uv;

          // Uniforms
          uniform mat4 worldViewProjection;

          // Varying
          varying vec4 vPosition;
          varying vec3 vNormal;

          void main() {
            vec4 p = vec4( position, 1. );
            vPosition = p;
            vNormal = normal;
            gl_Position = worldViewProjection * p;
          }
        </Vertex>
        <Fragment>
          precision highp float;

          uniform mat4 worldView;

          varying vec4 vPosition;
          varying vec3 vNormal;

          uniform sampler2D textureSampler;
          uniform sampler2D refSampler;

          void main(void) {
            vec3 e = normalize( vec3( worldView * vPosition ) );
            vec3 n = normalize( worldView * vec4(vNormal, 0.0) ).xyz;
            vec3 r = reflect( e, n );
            float m = 2. * sqrt(
              pow( r.x, 2. ) +
              pow( r.y, 2. ) +
              pow( r.z + 1., 2. )
            );
            vec2 vN = r.xy / m + .5;
            vec3 base = texture2D( refSampler, vN).rgb;
            gl_FragColor = vec4( base, 1. );
          }
        </Fragment>
      </Shader>
    </Asset>
  </Scene>

<script>
import trophy from '../assets/Trophy.gltf'

export default {
  name: 'Trophy',
  data () {
    return {
      publicPath: trophy,
      myCamera: {
        checkCollisions: true,
        applyGravity: true,
      },
      myAsset: {
        scaling: [0.75, 0.75, 0.75],
        position: [ 0, -100, 500 ],
        rotation: [0, 180, 0],
      },
    }
  },
  methods: {
    onScene(scene) {
      // should be fired when the scene object has been initialized
      console.log('Scene loaded!');
    }
  },
}
</script>

Here a simple example

http://glitch.com/edit/#!/pitch-twist

Any idea ?

Describe the bug
A clear and concise description of what the bug is.
I am trying to convert a mesh created in my vue code into a MeshButton3D. I know GUI is not one of the components supported by the library, so I am attempting to call the method directly by importing BABYLON into my component, but it does not seem to recognize any of the GUI methods.
Minimally Reproducible Example

• link: https://glitch.com/...

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. See error in (location [e.g. JavaScript Console])

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots (optional)
Add any screenshots to help explain your problem, unless the minimally reproducible example is sufficient.

Environment (please complete the following information):

• Device: [e.g. Desktop or Smartphone]
• OS: [e.g. Windows]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Hi,

How can we configure the camera mode?

I love uses components with Babylon but there seems to be some sort of important missing feature. Hopefully, we can add obj... importer etc.

https://doc.babylonjs.com/how_to/load_from_any_file_type

Navbar is confusing to navigate because the headings are not pronounced and it is unclear what page you are currently on. It should be clearer that "API" is a heading, not the current page.

When using <Scene v-model="myScene" ….>

the myScene data element does not initialize.

The workaround I use is to capture the scene object in the onScene event and store in in myScene. However, in the vue dev tools for chrome, myScene is consistently reported as "unknown object" and can not be explored. Logging myScene to console does show the internals of the scene.

Error: too much recursion!
This bug generates when splitting the code into separate components for organizing code

Minimally Reproducible Example
just a basic example:

<scene>
     <Camera type="arcRotate" :radius="10" :beta="Math.PI / 4" />
       <HemisphericLight>
           <property name="intensity" :float="1" />
       </HemisphericLight>

       <Ground :options="{ width: 10, height: 10, subdivisions: 4 }">
          <physics />
       </Ground>
</scene>

I would like to split the ground for example:

<!-- Ground.vue -->
<Ground :options="{ width: 10, height: 10, subdivisions: 4 }">
    <physics />
</Ground>

and importing in the main comp:

<template>
<scene>
     <Camera type="arcRotate" :radius="10" :beta="Math.PI / 4" />
       <HemisphericLight>
           <property name="intensity" :float="1" />
       </HemisphericLight>

       <Ground />
</scene>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Ground from './Ground.vue';

@Component({
  components: {
    Ground
  },
})
export default class HelloWorld extends Vue {}
</script>

Expected behavior
A normal import for the component

Environment (please complete the following information):

• Device: [Desktop]
• OS: [Windows10 64bit]
• Browser [e.g. chrome, safari, firefox]

Babylonjs has released a new version (4.0.0), and maybe it could be updated on the package as well?

As i say, can you fire a new pre version to npm for us to testing. BTW, the v-mode add on <Scene> not work! watch can't listen the change

Hi, firstly thank you for this amazing project.
When using it I encountered a situation where I need to listen to the asset loaded event to trigger UI changes. Specifically, I am working on my product website, in it, there is a mockup phone initially paired with a loading indicator, and once the GLTF file is loaded into the scene I want the indicator gone so that the user could see the lock screen UI along with the loaded GLTF model.
Currently, I haven't found a workaround. The v-model watcher for the asset seems to be triggered way before the asset is actually loaded, and thus my lock screen UI is set as visible even the asset is still loading.
Thus I propose to add an asset ready event so that people could use v-on syntax to listen for state changes. I have made some preliminary changes at JustinFincher@0582067, but upon npm start it throws errors related to babylon.js itself (no matter with or without my addition):

➜  vue-babylonjs git:(master) ✗ npm start   

> [email protected] start /Volumes/DEVDRIVE/Develop/FE/vue-babylonjs
> npm run b start:client


> [email protected] b /Volumes/DEVDRIVE/Develop/FE/vue-babylonjs
> CONTEXT=$(pwd) npm explore begin-build -- npm run "start:client"


> [email protected] start:client /Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/begin-build
> node begin.js; npm run watch:client



                                                                          
                                                                          
                    
                    
                                                                                                
                                                                                                 
                                                                                                  
                                                                                                  
                                                                                                  
                                                                                                  
                                                                                                  
                                                                                                  
                                                                                                  
                                                                                                    
                                                                                                    
                                                                                                    
                                                              
                                                             
                                                            
                                                          



> [email protected] watch:client /Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/begin-build
> npm run watcher -- --exec 'nf run npm run b dev:client'


> [email protected] watcher /Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/begin-build
> cd $CONTEXT; nodemon --watch yarn.lock --watch properties.js --watch .env "--exec" "nf run npm run b dev:client"

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): yarn.lock properties.js .env
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `nf run npm run b dev:client`

> [email protected] b /Volumes/DEVDRIVE/Develop/FE/vue-babylonjs
> CONTEXT=$(pwd) npm explore begin-build -- npm run "dev:client"


> [email protected] dev:client /Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/begin-build
> webpack-dev-server -d --host ${IP:=0.0.0.0} --config webpack.config.js --env.stage=development --env.port=${PORT:=8080} --env.context=$CONTEXT --progress $(if [ $C9_HOSTNAME ]; then echo "--public $C9_HOSTNAME --env.url=https://$C9_HOSTNAME"; fi)

10% building 1/1 modules 0 activeℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/begin-build
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣:    1086 modules

ERROR in ../@babylonjs/core/Meshes/mesh.js
Module build failed (from ../babel-loader/lib/index.js):
TypeError: /Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babylonjs/core/Meshes/mesh.js: Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got null
    at Object.validate (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/types/lib/definitions/utils.js:131:11)
    at validateField (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/types/lib/validators/validate.js:24:9)
    at Object.validate (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/types/lib/validators/validate.js:17:3)
    at NodePath._replaceWith (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/path/replacement.js:172:7)
    at NodePath._remove (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/path/removal.js:55:10)
    at NodePath.remove (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/path/removal.js:34:8)
    at hooks (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/path/lib/removal-hooks.js:11:12)
    at NodePath._callRemovalHooks (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/path/removal.js:46:9)
    at NodePath.remove (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/path/removal.js:26:12)
    at convertFunctionParams (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/plugin-transform-parameters/lib/params.js:88:30)
    at PluginPass.Function (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/plugin-transform-parameters/lib/index.js:30:53)
    at newFn (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/visitors.js:179:21)
    at NodePath._call (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Volumes/DEVDRIVE/Develop/FE/vue-babylonjs/node_modules/@babel/traverse/lib/context.js:112:16)
ℹ ｢wdm｣: Failed to compile.

For the reference, I am using node v12.16.0, and the @babylonjs/core dependency in package-lock is 4.1.0. I am not familiar with TypeScript so I cannot do much about it, it would be great if you can look into it, thanks!

Describe the bug
Two issues I am facing,

1. By adding <camera>, it changes the colour of the object.
2. By not adding <camera>, :scaling and :position are not working.

Demo with Babylon asset

Steps.

1. With <camera> commented out, you will be able to see the rabbit. However, no matter what I put for :scaling and :position, rabbit stays at where it is.
2. Run again with,<camera>, now you can see that <asset> works with scaling and position but now it changes the colour of the rabbit.

Expected behaviour
We should see the same output, the rabbit not black rabbit when you add <camera> as it's there to control the camera, which is viewing, not changing colour which could be possibly done by a light.

Environment
Device: Desktop
OS: Windows 10
Browser: Chrome
Version: 79.0.3945.88

Hello, this project look amazing :)

Loader component exist ?

Thanks

Bug story
When I import the library inside my test file:

// example.spec.ts
import { .... } from 'vue-babylonjs';
//OR
import vb from 'vue-babylonjs';

the following bug prevents excecution

 FAIL  tests/unit/example.spec.ts
  ● Test suite failed to run

    ReferenceError: performance is not defined

      at Object.56.../collision/AABB (node_modules/vue-babylonjs/dist/umd.js:100938:25)
      at s (node_modules/vue-babylonjs/dist/umd.js:93617:21)
      at node_modules/vue-babylonjs/dist/umd.js:93619:22
      at Object.2.../package.json (node_modules/vue-babylonjs/dist/umd.js:93715:20)
      at s (node_modules/vue-babylonjs/dist/umd.js:93617:21)
      at e (node_modules/vue-babylonjs/dist/umd.js:93625:44)
      at node_modules/vue-babylonjs/dist/umd.js:93627:8
      at node_modules/vue-babylonjs/dist/umd.js:93603:24
      at node_modules/vue-babylonjs/dist/umd.js:93604:6
      at createCommonjsModule (node_modules/vue-babylonjs/dist/umd.js:93251:39)

Expected behavior

1. Test file should import the module/lib
2. Test file should access the components e.g. <Scene /> without stubbing them

Screenshots (optional)
To test my current component, I have to stub all the vb components to skip them.
Here is a full test example:

import Vue from 'vue';
import Vuetify from 'vuetify';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import HelloWorld from '../../src/components/babylon/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  Vue.use(Vuetify);
  const vuetify = new Vuetify({});

  let wrapper: any;
  const localVue = createLocalVue();

  beforeEach(() => {
    wrapper = shallowMount(HelloWorld, {
      localVue,
      vuetify,
      stubs: [
        'Scene',
        'Camera',
        'Ground',
        'Sphere',
        'Animation',
        'HemisphericLight',
        'Physics',
        'Entity',
        'Key',
        'Material',
        'Texture',
        'Property',
      ],
    });
  });

  afterEach(() => {
    wrapper.destroy();
  });

  test('renders props.msg when passed', () => {
    const title = wrapper.find('v-card-title-stub');
    expect(title.text()).toBe('Test Gravity');
  });
});

Environment (please complete the following information):

• Device: [Desktop]
• OS: [Windows10]