# Spawn Mesh, triggert by websocket
**URL:** https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469
**Category:** Questions
**Created:** [April 10, 2019, 11:19am UTC](https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469 "2019-04-10T11:19:05Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@genuinepk](https://forum.babylonjs.com/u/genuinepk)
#### Post date: [April 10, 2019, 11:19am UTC](https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469/1 "2019-04-10T11:19:05Z")
Hi,
I’m trying to spawn an mesh object (car), triggered by a websocket event.
I’m using vue with a store, to connect to the websockets and hold the data from the websocket. For the first try out, I have also a static object list at a json file, which is loaded at start up. The 4 objects are loaded fine at start. If I create a websocket event, the visualization breaks.
I tried 2 different ways. Cloning and loading the mesh again with AssetsManager. The solution with AssetsManager works, but I get a load screen, when the fifth car spawns and the performance is really bad, because of reloading the same mesh multiple times. Cloning will be the solution, for the performance problem.
All functions are in ParkdeckVisualization.vue
Here is the code, with the AssetsManager:
```
methods: {
...
createCarObject(vehicle_id) {
console.log('ParkdeckVisualization.vue createCar called with vehicle_id:', vehicle_id)
let vehicle = this.$store.getters.vehiclesDict[vehicle_id]
let position = vehicle.pose.position
let standardPos = new Vector3(position[0], position[2], position[1])
let loader = new AssetsManager(this.scene);
loader.useDefaultLoadingScreen = true; // Set to false to remove the default loading
let carModelLink = this.babylonFiles.carModel
console.log('carModelLink:',carModelLink)
let vehicle_loaded_task = loader.addMeshTask("loading " + vehicle_id, 'car', '', carModelLink);
vehicle_loaded_task.onSuccess = function (task) {
let m = task.loadedMeshes[0]
console.log("Loaded!", vehicle_id);
console.log("Load mesh:", task.loadedMeshes);
m.position = standardPos;
m.rotation = this.calcQuaternion(vehicle.pose.quaternion);
console.log(m);
this.car_meshs[vehicle_id] = m
this.carPool.push(m)
};
let scene = this.scene
let engine = this.engine
loader.onFinish = function () {
console.log("onFinish!", vehicle_id);
engine.runRenderLoop(function () {
scene.render();
});
};
loader.load();
```
Here is the same function, with cloning the mesh:
```
methods: {
...
createCarObject(vehicle_id) {
console.log('ParkdeckVisualization.vue createCar called with vehicle_id:', vehicle_id)
let vehicle = this.$store.getters.vehiclesDict[vehicle_id]
let position = vehicle.pose.position
let standardPos = new Vector3(position[0], position[2], position[1])
if (this.carModel) {
console.log('this.carModel:', this.carModel)
var carClone = this.carModel.clone(vehicle.id)
console.log('pos for vehclie:', vehicle_id, standardPos)
carClone.position = standardPos
carClone.rotationQuaternion = this.calcQuaternion(vehicle.pose.quaternion)
console.log('quat for vehclie:', vehicle_id, carClone.rotation.toQuaternion())
carClone.material.freeze()
carClone.isVisible = true
this.car_meshs[vehicle_id] = carClone
this.carPool.push(carClone)
} else {
console.warn('car model is not loaded')
}
```
The createCarObject function is triggered from checkForNewVehicles function.
```
methods: {
...
checkForNewVehicles() {
console.log('ParkdeckVisualization.vue checkForNewVehicles called')
if (!this.car_meshs) {
console.log('ParkdeckVisualization.vue init this.car_meshs')
this.car_meshs = {};
}
try {
let car_meshs = this.car_meshs;
//check for new cars in vehiclesDict
for (let key in this.$store.getters.vehiclesDict) {
if (!(key in car_meshs)) {
this.createCarObject(key);
}
}
} catch (e) {
// Anweisungen für jeden Fehler
console.log('ParkdeckVisualization.vue checkForNewVehicles error:', e)
}
},
```
The function checkForNewVehicles is triggered from two different functions. While runtime, I connected the vehiclesDict getter from store to my ParkdeckVisualization.vue
```
watch: { //observers
...
vehiclesDict() {
console.log('ParkdeckVisualization.vue Watch vehiclesDict called')
this.checkForNewVehicles()
try {
//check for cars removed in vehiclesDict, but still shown in car_meshs
for (let key in this.car_meshs) {
if (!(key in this.$store.getters.vehiclesDict)) {
this.destroyCarObject(key)
}
}
} catch (e) {
// Anweisungen für jeden Fehler
console.log('ParkdeckVisualization.vue Watch vehiclesDict check for removed vehicles error:', e)
}
return this.$store.getters.vehiclesDict
},
```
At startup, I loading the json file to the store, but at this time the mesh is not loaded. I place the cars, after the mesh has been loaded:
```
methods: {
...
loadCar() {
let scene = this.scene
let loader = new AssetsManager(scene);
loader.useDefaultLoadingScreen = false; // Set to false to remove the default loading
let carModelLink = this.babylonFiles.carModel
console.log('carModelLink:', carModelLink)
let vehicle_loaded_task = loader.addMeshTask("loadingCarMesh" , 'car', '', carModelLink);
var carModel = null
vehicle_loaded_task.onSuccess = function (task) {
console.log("vehicle_loaded_task onSuccess!");
carModel = task.loadedMeshes[0];
carModel.isVisible = false;
};
let engine = this.engine
var self = this
loader.onFinish = function () {
console.log("onFinish!");
self.positionCar(carModel)
engine.runRenderLoop(function () {
scene.render();
});
};
loader.load();
},
positionCar(carMesh) {
console.log('ParkdeckVisualization.vue positionCar called')
this.carModel = carMesh;
this.checkForNewVehicles()
},
```
As you can see, I’m using the same function “checkForNewVehicles” at startup, as at runtime. At startup, the cloning works, I’m getting the 4 car meshs, at the position, defined in my json file. While runtime, the cloning is not working. Because of, I’m not a js programmer, I have not really an idea, why it is not working.
From my experience from other languages and gui programming, I would say it is a threading problem, but I have no idea to solve it in js.
---
### Author:  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [April 10, 2019, 1:53pm UTC](https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469/2 "2019-04-10T13:53:42Z")
Hello and welcome,
can you check f12 console to see if there is any error that could guide use?
(not so bad for a non JS developer by the way 🙂 )
---
### Author:  [@genuinepk](https://forum.babylonjs.com/u/genuinepk)
#### Post date: [April 10, 2019, 2:28pm UTC](https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469/3 "2019-04-10T14:28:41Z")
I can paste the log later, but I can tell you, there is nothing unexpected. Is there a debug mode or something I can activate in the Babylon framework?
BTW I got some help from a web developer 😉 but he has also no idea.
---
### Author:  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [April 10, 2019, 3:21pm UTC](https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469/4 "2019-04-10T15:21:06Z")
well then we need a repro in the playground to help you further 🙂
---
### Author:  [@genuinepk](https://forum.babylonjs.com/u/genuinepk)
#### Post date: [April 10, 2019, 3:45pm UTC](https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469/5 "2019-04-10T15:45:51Z")
HI,
here is the console output.
At first the start up stuff.
```
webpack-internal:///./node_modules/webpack/hot/log.js:24 [HMR] Waiting for update signal from WDS...
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Home.vue?vue&type=script&lang=js&:82 Home.vue Getter vehicles called
webpack-internal:///./src/store/index.js:592 Store Getter vehicles called
webpack-internal:///./src/store/index.js:602 Store.getters.vehicles listOfVehicles: Array(0)
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Home.vue?vue&type=script&lang=js&:86 Home.vue Getter vehiclesDict called
webpack-internal:///./src/store/index.js:606 Store Getter vehiclesDict called
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Home.vue?vue&type=script&lang=js&:78 Home.vue positionMessage called
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/info-tables/VehiclesTable.vue?vue&type=script&lang=js&:265 VehiclesTable.vue Getter vehicles called
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Home.vue?vue&type=script&lang=js&:60 mounted home Object undefined
webpack-internal:///./src/store/index.js:349 execute initVehicles
webpack-internal:///./src/store/index.js:246 SET_VEHICLES called. Payload: Array(4)
webpack-internal:///./src/store/index.js:261 SET_VEHICLES after setting state.vehicles: Object
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Home.vue?vue&type=script&lang=js&:82 Home.vue Getter vehicles called
webpack-internal:///./src/store/index.js:592 Store Getter vehicles called
webpack-internal:///./src/store/index.js:602 Store.getters.vehicles listOfVehicles: Array(4)
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Home.vue?vue&type=script&lang=js&:86 Home.vue Getter vehiclesDict called
webpack-internal:///./src/store/index.js:606 Store Getter vehiclesDict called
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:189 ParkdeckVisualization.vue Watch vehicles called
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:190 ParkdeckVisualization.vue length of vehicles 4
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:194 ParkdeckVisualization.vue Watch vehiclesDict called
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:408 ParkdeckVisualization.vue checkForNewVehicles called
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:356 ParkdeckVisualization.vue createCar called with vehicle_id: patrick __VauWeh__ CC__2018-09-26_13-32
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:401 car model is not loaded
createCarObject @ webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:401
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:356 ParkdeckVisualization.vue createCar called with vehicle_id: patrick __VauWeh__ Caddy__2018-09-26_14-02
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:401 car model is not loaded
createCarObject @ webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:401
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:356 ParkdeckVisualization.vue createCar called with vehicle_id: patrick __VauWeh__ fox__2018-09-26_13-30
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:401 car model is not loaded
createCarObject @ webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:401
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:356 ParkdeckVisualization.vue createCar called with vehicle_id: patrick __VauWeh__ Pheaton__2018-09-26_13-53
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:401 car model is not loaded
createCarObject @ webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:401
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/info-tables/VehiclesTable.vue?vue&type=script&lang=js&:265 VehiclesTable.vue Getter vehicles called
webpack-internal:///./src/store/index.js:91 edgeSocketOpen Event
webpack-internal:///./src/store/index.js:68 spotSocketOpen Event
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8074 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
webpack-internal:///./src/store/index.js:115 positionSocketOpen Event
webpack-internal:///./src/store/index.js:51 got babylon files Object
webpack-internal:///./node_modules/babylonjs/babylon.js:1 Babylon.js engine (v3.3.0) launched
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:321 load scene E
23webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:325 found floor
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:440 carModelLink: http://127.0.0.1:8000/static/babylon_models/car.babylon
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:446 vehicle_loaded_task onSuccess!
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:455 onFinish!
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:549 ParkdeckVisualization.vue positionCar called
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:408 ParkdeckVisualization.vue checkForNewVehicles called
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:356 ParkdeckVisualization.vue createCar called with vehicle_id: patrick __VauWeh__ CC__2018-09-26_13-32
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:390 this.carModel: _
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:392 pos for vehclie: patrick __VauWeh__ CC__2018-09-26_13-32 d
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:395 quat for vehclie: patrick __VauWeh__ CC__2018-09-26_13-32 u
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:356 ParkdeckVisualization.vue createCar called with vehicle_id: patrick __VauWeh__ Caddy__2018-09-26_14-02
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:390 this.carModel: _
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:392 pos for vehclie: patrick __VauWeh__ Caddy__2018-09-26_14-02 d
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:395 quat for vehclie: patrick __VauWeh__ Caddy__2018-09-26_14-02 u
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:356 ParkdeckVisualization.vue createCar called with vehicle_id: patrick __VauWeh__ fox__2018-09-26_13-30
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:390 this.carModel: _
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:392 pos for vehclie: patrick __VauWeh__ fox__2018-09-26_13-30 d
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:395 quat for vehclie: patrick __VauWeh__ fox__2018-09-26_13-30 u
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:356 ParkdeckVisualization.vue createCar called with vehicle_id: patrick __VauWeh__ Pheaton__2018-09-26_13-53
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:390 this.carModel: _
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:392 pos for vehclie: patrick __VauWeh__ Pheaton__2018-09-26_13-53 d
webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/ParkdeckVisualization.vue?vue&type=script&lang=js&:395 quat for vehclie: patrick __VauWeh__ Pheaton__2018-09-26_13-53 u
webpack-internal:///./src/store/index.js:96 edge socket message Object
```
Then I got an error, because of a missing texture, nothing to worry about, I think.
```
D_Car_3_car_DIFFUSE.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
webpack-internal:///./node_modules/babylonjs/babylon.js:1 BJS - [17:20:03]: Error while trying to load image: D_Car_3_car_DIFFUSE.jpg
m._ErrorEnabled @ webpack-internal:///./node_modules/babylonjs/babylon.js:1
```
I took a look into the console settings and enabled “verbose” output. This output is new for me. Something to worry about?:
```
1451[Violation] 'requestAnimationFrame' handler took ms
```
Here is the console output after the websocket event:
```
index.js?4360:45 spot socket message {data: {…}, message_type: "spot_status_init"}
index.js?4360:84 position socket message MessageEvent ...
index.js?4360:85 position message {color: null, data: Array(1), message_type: "checkin"}
index.js?4360:363 actionCheckinVehicleMessage called with message: {color: null, data: Array(1), message_type: "checkin"}
index.js?4360:189 CHECKIN_VEHICLE called with payload: [{…}]
index.js?4360:192 CHECKIN_VEHICLE in loop vehicle __dict_obj: {patrick__ Audi __A4__ 2018-09-26_13-05: {…}}
index.js?4360:194 CHECKIN_VEHICLE in loop vehicle__dict_obj[key]: {color: "pink", id: "patrick__Audi __A4__ 2018-09-26_13-05", level: "4", model: "A4", numberPlate: "B-EF-333", …}
index.js?4360:200 SET_VEHICLES after setting state.vehicles: {…}
Home.vue?76f2:78 Home.vue Getter vehicles called
index.js?4360:498 Store Getter vehicles called
index.js?4360:508 Store.getters.vehicles listOfVehicles: (5) [{…}, {…}, {…}, {…}, {…}]
Home.vue?76f2:82 Home.vue Getter vehiclesDict called
index.js?4360:513 Store Getter vehiclesDict called
ParkdeckVisualization.vue?8bcb:173 ParkdeckVisualization.vue Watch vehicles called
ParkdeckVisualization.vue?8bcb:174 ParkdeckVisualization.vue length of vehicles 5
ParkdeckVisualization.vue?8bcb:178 ParkdeckVisualization.vue Watch vehiclesDict called
ParkdeckVisualization.vue?8bcb:391 ParkdeckVisualization.vue checkForNewVehicles called
ParkdeckVisualization.vue?8bcb:333 ParkdeckVisualization.vue createCar called with vehicle_id: patrick __Audi__ A4__2018-09-26_13-05
ParkdeckVisualization.vue?8bcb:369 this.carModel: _ {…}
ParkdeckVisualization.vue?8bcb:371 pos for vehclie: patrick __Audi__ A4__2018-09-26_13-05 d {x: -5.2, y: 102.639, z: -16.8}
ParkdeckVisualization.vue?8bcb:375 quat for vehclie: patrick __Audi__ A4__2018-09-26_13-05 u {x: 0, y: 0, z: 0, w: 1}
VehiclesTable.vue?994f:258 VehiclesTable.vue Getter vehicles called
```
Creating a playground will be a bit complicated, The webpage is running on a Python Django backend with channels plugin and the javascript is connected to the backend via websockets, Without the websockets and the data from them, the js will do nothing, because the js should be as stupid as possible. Any ideas, to fake this are welcome.
---
### Author:  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [April 10, 2019, 4:52pm UTC](https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469/6 "2019-04-10T16:52:25Z")
Can we see the problem live somewhere then? I need to see it to help debugging
---
### Author:  [@genuinepk](https://forum.babylonjs.com/u/genuinepk)
#### Post date: [April 27, 2019, 11:21am UTC](https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469/7 "2019-04-27T11:21:59Z")
Hi,
sorry, it takes a while, to create online running instance, which has the feature, to create the new vehicle from the page itself, but now, I have it.
How can I send you the access data to the page? I don’t want to paste everything public here and I didn’t found a way, to send you a personal message in this forum.
Once before here the explanations, how you can cause my problem one the page.
In the right upper corner, you will find a button with a vehicle icon. This button triggers the process for creating a new vehicle in the backend. From the backend will come a message on a websocket, like explained in my first entry. You can validate, that the trigger was successful at the table at the right side of the babylon frame, there will be a fifth entry. The vehicle should spawn in front of the four parking spots at the entry of the parking lot.
If you move the camera down to the floor and turn the cameera view to the sky, you will see the broken visualisation.
After reloading the page, the visualization will be reseted and you can retry it.
Don’t hasitate, to contact me for further questions.
---
### Author:  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [April 27, 2019, 12:51pm UTC](https://forum.babylonjs.com/t/spawn-mesh-triggert-by-websocket/2469/8 "2019-04-27T12:51:17Z")
it is complicated to help you:)
the problem is we need a simple repro to isolate the issue and this does not seem to be a simple repro
I cannot debug through your entire code. further with Vue on top of it.
I can try to take a look but I promise nothing:(
send me the link to [Davca@microsoft.com](mailto:Davca@microsoft.com)