# \[ANNOUNCE\] node-red-contrib-ui-babylonjs-3d : first beta

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742>\
**Category:** Share Your Nodes\
**Created:** [28 February 2021 08:03 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742 "2021-02-28T08:03:58Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 February 2021 08:03 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742/1 "2021-02-28T08:03:58Z")

</div>

Hi folks,

Two months ago I was experimenting with [light sources in SVG](https://discourse.nodered.org/t/having-fun-with-svg-playing-with-light-sources/38346) drawings. Although SVG is "very" useful for a lot of use cases, it immediately became clear to me that _ **2D** _ drawings are just too limited for this kind of functionality.

Moreover our friend @dceejay had already passed me an article some time ago "[the smart home gains another dimension](https://hackaday.com/2019/12/29/the-smart-home-gains-an-extra-dimension/)". And indeed how cool would it be to turn on a light in your home, while the same light turns on in your 3D home on your Node-RED dashboard. So it was time that _ **Node-RED goes 3D** _ with [node-red-contrib-ui-babylonjs-3d](https://github.com/bartbutenaers/node-red-contrib-ui-babylonjs-3d/blob/main/README.md) 🍾 🥳

May sound a bit fancy but I think there might a lot of use cases: suppose @scargill (sorry for mentioning, but couldn't resist 😉 ) is on his yacht in the middle of the sea, and for some reason the damn boat won't start anymore. Would be interesting to get a 3D wireframe view of the boat, where the sensors highlight in red where a malfunctioning has been detected. Because then the problem can be located immediately, withouth having to analyze multiple floorplans ...

I have always been impressed by the fancy (unreal) surveillance software being used in _ **Mission Impossible** _, and CSI Miami ... Toys for boys 🤣. So here it is in your Node-RED dashboard. A burglar has been detected in a room, and by putting the entire building in wireframe mode and the room in red, you can immediately see what is going on:

![mission_impossible](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/db8ed0617705edd2aa851f726b92fb43ff232465.gif)

⚠ I will need a surgery next friday and I won't be able to develop for a few months 😭. But I wanted to announce this beta, so the community can meanwhile discuss about this node, report bugs, propose new features, ... However keep in mind that this node is FAR from finished due to my time constraint. And that I won't be able to program, so _ **NO support** _ this time!!!!!!!!!!!!!!!!!!

As always, all _ **"constructive"** _ feedback is very much appreciated!

P.S. For those wondering why I used [BabylonJs](https://www.babylonjs.com/) instead of [threejs](https://threejs.org/), since the latter one is also very cool. Reason is simple: the threejs team changes their API from time to time, and I don't have time to rewrite my node over and over again. So BabylonJs was the best fit for me.

P.S. This beta version is _ **NOT** _ on NPM: see installation command on my Github readme page.

Have fun with it!  
Bart

---

<div class="post-metadata">

**Author:** ![ahmadsayed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ahmadsayed/32/24312_2.png) [@ahmadsayed](https://discourse.nodered.org/u/ahmadsayed)\
**Post date:** [28 February 2021 14:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742/2 "2021-02-28T14:38:09Z")

</div>

> [@BartButenaers](#):
>
> I will need a surgery next friday and I won't be able to develop for a few months 😭. But I wanted to announce this beta, so the community can meanwhile discuss about this node, report bugs, propose new features, ... However keep in mind that this node is FAR from finished due to my time constraint. And that I won't be able to program, so _ **NO support** _ this time!!!!!!!!!!!!!!!!!!

Hope you getting very well soon

> [@BartButenaers](#):
>
> P.S. For those wondering why I used [BabylonJs](https://www.babylonjs.com/) instead of [threejs](https://threejs.org/), since the latter one is also very cool. Reason is simple: the threejs team changes their API from time to time, and I don't have time to rewrite my node over and over again. So BabylonJs was the best fit for me.

Make sense to me I am working very slowly, in another node, based on babylonjs also and for more than 3 years i barely needed to change the API, but it is very different in its design approach and usability, may the intended use as well, I am targeting doing some sort of web-based low code visual editor

> **[GitHub - ahmadsayed/node-red-contrib-web-babylonjs](https://github.com/ahmadsayed/node-red-contrib-web-babylonjs)**
>
> Contribute to ahmadsayed/node-red-contrib-web-babylonjs development by creating an account on GitHub.

so we can even build a game with it

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/8/c845b0c5bc11c07954862d061fbea138bb6132e9.jpeg "NodeRed T.Rex Game") ](https://www.youtube.com/watch?v=J1N06yBLh48)

My only concern is about naming, is it okay to have names that close

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 February 2021 15:18 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742/3 "2021-02-28T15:18:19Z")

</div>

> [@ahmadsayed](#):
>
> so we can even build a game with it

Hey Ahmed,  
Node-RED as a 3D game engine:cool idea 🙂  
Looks very nice!!

> [@ahmadsayed](#):
>
> My only concern is about naming, is it okay to have names that close

Personally I don't think there is an issue: I have a ...-ui-... so people know immediately that my node is a dedicated dashboard widget (since that is some kind of naming convention). While you have a ...-web-... node, similar to the worldmap node. So for me it is ok.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 February 2021 15:48 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742/4 "2021-02-28T15:48:31Z")

</div>

What tools are people doing for building the 3D models?

* * *

PS: BabylonJS should work fine with uibuilder with or without Vue - in case anyone wants to use it without needing Dashboard.

There is also a Vue component: [Beg-in/vue-babylonjs: A ready-to-go 3d environment for Vue.js using Babylon.js (github.com)](https://github.com/Beg-in/vue-babylonjs)

Not tried any of it but I've not found anything yet that doesn't work 😁

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 February 2021 17:47 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742/5 "2021-02-28T17:47:56Z")

</div>

> [@TotallyInformation](#):
>
> What tools are people doing for building the 3D models?

Hi Julian,  
I'm not really an expert, so it was a bit of a battle to create my demo's...

BabylonJs offers following formats:

- babylon
- .gltf
- .glb (binary GLTF)
- .obj
- .stl

Read somewhere that they advice to use gltf, but cannot find that page at the moment.

You can see in my issue list that they have a bug at the moment to load mtl (material) files fir obj, but I found the cause and they have fixed it. But not on npm yet...

So you need to use a 3D editor that can export one if these formats. E.g. the open source [http://www.sweethome3d.com/](http://www.sweethome3d.com/)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 February 2021 18:36 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742/6 "2021-02-28T18:36:48Z")

</div>

> [@BartButenaers](#):
>
> I won't be able to develop for a few months

@TotallyInformation,  
I have arranged my absence especially for you, to make sure you have a few months extra time to integrate BabylonJs into uiBuilder. It must be awful for you to see all those new fancy widgets arriving in the dashboard 🤣 😂

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 February 2021 21:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742/7 "2021-02-28T21:23:37Z")

</div>

> [@BartButenaers](#):
>
> gltf

OK, looks like Sketchup, Blender, Microsoft Paint3D, and TinkerCAD support the gltf format. I'm sure others do as well but that is most of the favourite and free options. OpenSCAD doesn't seem to directly support it but does support others in that list. Fusion360 also supports gltf.

I used to do a lot of 3d modelling and graphics back in the heady days of the Amiga (and bachelorhood!). Imagine 3D and Real3D mainly. Not so much in recent years, last things I did was a rough architectural model for some potential changes to our loft/attic spaces and then another model for what we actually did some years later. That was in Sketchup. I couldn't use something like sweethome3d because most of those tools didn't support angled walls and we have a house where one wall is 11 deg. out of true!

> [@BartButenaers](#):
>
> I have arranged my absence especially for you, to make sure you have a few months extra time to integrate BabylonJs into uiBuilder. It must be awful for you to see all those new fancy widgets arriving in the dashboard

Actually, I feel sorry for those people who have to write a custom node to support things whereas I only have to say - "it already works with uibuilder!" 😁

All I really need to do is win you over from the dark side Bart 🤣 Or maybe retire so that I have enough time for all those ideas.

Anyway, absolutely trivial to use BabylonJS with uibuilder, with or without Vue 😁

Hope your surgery goes well Bart and that you are able to recover quickly.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 March 2021 15:39 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742/8 "2021-03-01T15:39:26Z")

</div>

Hi Bart

hopefully not to late - but how do I get the camera\_update to work ? (with an arc camera) - what format should the message be ? As it's a rotation what are the properties needed ? Thanks

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 March 2021 21:00 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-babylonjs-3d-first-beta/41742/9 "2021-03-01T21:00:55Z")

</div>

> [@dceejay](#):
>
> hopefully not to late

Still few evenings for fun stuff 😉

> [@dceejay](#):
>
> how do I get the camera\_update to work ? (with an arc camera) - what format should the message be ? As it's a rotation what are the properties needed

I have added a small fix on Github to allow the position of arc rotation camera's to be updatable afterwards.

Currently there is only few things that you can change via an `update_camera` command:

- `active`: whether a camera is the active camera, i.e. look to the scene through this camera.
- `position`: the current position where the camera is located. This is only available for camera's of types _arcRotate_ and _anaglyphArcRotate_.
- `targetPosition`: the current position of the target where the camera is looking at. This is not available for a followCamera.

You always need to specify the camera `name` or `id`. The name can be a single name, an array of names (as you requested some time ago), or a regex. The latter two options can be used to update multiple camera's with a single command...

A command can update the 3 properties, but it is also possible to update only a single property...

Here is a simple test flow that hopefully makes it a bit better to understand:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f075fab749aafc0254282541c34f9244aa35715.png)

```auto
[{"id":"cda52145.34c6b","type":"ui_babylon_js","z":"2b6f5d19.202242","name":"BabylonJs (Cameras)","group":"3c00e495.ad69ec","order":0,"width":"12","height":"9","folder":"","filename":"","outputField":"payload","actions":[],"showBrowserErrors":true,"startupCommands":"[{\"command\":\"create_mesh\",\"type\":\"box\",\"name\":\"my_box\",\"meshOptions\":{\"width\":1,\"height\":1,\"depth\":1},\"position\":{\"x\":0,\"y\":0,\"z\":0}},{\"command\":\"create_mesh\",\"type\":\"sphere\",\"name\":\"my_sphere\",\"meshOptions\":{\"diameterX\":1,\"diameterY\":1,\"diameterZ\":1},\"position\":{\"x\":1.5,\"y\":1.5,\"z\":1.5}},{\"command\":\"create_camera\",\"type\":\"arcRotate\",\"name\":\"cam1\",\"position\":{\"x\":4,\"y\":3,\"z\":-3},\"targetPosition\":{\"x\":0,\"y\":0,\"z\":0},\"active\":true},{\"command\":\"create_camera\",\"type\":\"arcRotate\",\"name\":\"cam2\",\"position\":{\"x\":1,\"y\":5,\"z\":-1},\"targetPosition\":{\"x\":0,\"y\":0,\"z\":0}}]","x":1960,"y":200,"wires":[["20d1980f.855d68"]]},{"id":"20d1980f.855d68","type":"debug","z":"2b6f5d19.202242","name":"camera properties","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":2190,"y":200,"wires":[]},{"id":"41f73958.c7d008","type":"inject","z":"2b6f5d19.202242","name":"Activate cam1","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam1\",\"active\":true}","payloadType":"json","x":1690,"y":180,"wires":[["cda52145.34c6b"]]},{"id":"99f24b81.8d3d98","type":"inject","z":"2b6f5d19.202242","name":"Get camera(s) properties","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"get_camera_properties\",\"name\":\"^.*\"}","payloadType":"json","x":1650,"y":440,"wires":[["cda52145.34c6b"]]},{"id":"210394c7.9e23cc","type":"inject","z":"2b6f5d19.202242","name":"Activate cam2","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam2\",\"active\":true}","payloadType":"json","x":1690,"y":220,"wires":[["cda52145.34c6b"]]},{"id":"347350ff.f24d2","type":"inject","z":"2b6f5d19.202242","name":"Move cam1 to top position","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam1\",\"position\":{\"x\":1,\"y\":3,\"z\":-1},\"active\":true}","payloadType":"json","x":1650,"y":280,"wires":[["cda52145.34c6b"]]},{"id":"a7ba0968.30be78","type":"inject","z":"2b6f5d19.202242","name":"Move cam2 target position to sphere","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam2\",\"targetPosition\":{\"x\":1.5,\"y\":1.5,\"z\":1.5},\"active\":true}","payloadType":"json","x":1620,"y":340,"wires":[["cda52145.34c6b"]]},{"id":"98beb081.00a09","type":"inject","z":"2b6f5d19.202242","name":"Move cam2 target position to box","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"update_camera\",\"name\":\"cam1\",\"targetPosition\":{\"x\":0,\"y\":0,\"z\":0},\"active\":true}","payloadType":"json","x":1630,"y":380,"wires":[["cda52145.34c6b"]]},{"id":"3c00e495.ad69ec","type":"ui_group","z":"","name":"Cameras","tab":"ed46361d.448ae8","order":4,"disp":true,"width":"12","collapse":false},{"id":"ed46361d.448ae8","type":"ui_tab","z":"","name":"BabylonJs7","icon":"dashboard","disabled":false,"hidden":false}]

```

1. The _"Startup"_ parameter on the config screen creates a scene with a sphere and a box, and two arc rotation camera's (with names "cam1" and "cam2").
2. The _Active cam_ nodes can be used to activate a camera.
3. The _Move cam to position_ can be used to change the position of a camera.
4. The _Move cam target position_ can be used to change the target position of a camera.
5. The _Get camera properties_ can be used to get the properties of 1 or more camera's. This is useful if you have moved the camera around e.g. using your mouse, and you want to know afterwards the current position of the camera (e.g. to hardcode it in an Inject node...)/