BABYlONJS

[dheeju143]

In the context of 3D layout design, there is a method available for the TransformNode class that allows you to hide all meshes contained within it. Specifically, you can use the "setEnabled" method to disable rendering of the TransformNode and all its child meshes. This effectively hides the meshes from view within the 3D layout.

[dheeju143]

is there any command that can hide the TransformNode in this module?

[bartbutenaers]

Hi @dheeju143,

I haven't been using this node myself for a long time, but it seems from my code that I already have implemented something similar for lights in the past.

So it should be possible to do something similar for meshes. I have quickly created an "enable-mesh" branch in this repository, that implements your feature (see here). I have very few time lately, so would be nice if you could test it and let me know whether it works.

1. You can install my branch from Github - when you have git installed - via this command (from within your .node-red directory):

   npm install bartbutenaers/node-red-contrib-ui-babylonjs-3d#enable-mesh

2. Restart Node-RED.
3. Refresh your browser screen.
4. I assume your message payload should look like this:

   [{ "command": "update_mesh", "name": "my_mesh_name", "enabled": false }]

[dheeju143]

GREAT!!! Thank you for your valuable time bartbutenaers.

please view the folder structure was there in png and name "shop_center_4_0"

class: mesh has been updated and works well but I am actually looking for the class:- TransformNode to disable it. It was actually like a group of meshes that you can disable with TransformNode. I tried to use update_TransformNode as a command but that was not implemented i think so.

[bartbutenaers]

@dheeju143, If you reinstall my branch again, you should have some basic support for tranform nodes...

You can find an example flow on the readme page (see new Transform nodes section).

When you create a mesh, you can specify the parent transform node in the input message:

If you haven't created the transform node in advance, you will get obvious this error:

Here you can see the result of the demo flow:

Note that the transform node can currently only be applied as a parent to meshes. I thought that BabylonJs also supports it for some lights, but I have no time to read about that. So if you want it, it would be nice if you could look it up and summarize in this discussion where it can be used.

As soon as you have tested this (and it works fine), I will merge it into the main branch afterwards...

[dheeju143]

getting error for create,update,remove transformnode

BabylonJS supports creating, updating, and removing TransformNodes, even when they are parented to other TransformNodes. For example, you can create a TransformNode that bundles a complete mesh under its group, which allows for fast processing.

The TransformNode class, which includes the "isEnabled" attribute, can be used to represent the floor-to-floor mapping structure in a building. This allows you to easily visualize and manipulate the layout of the building at different levels.

PFA VIDEO how was can use transformnode

https://user-images.githubusercontent.com/86141162/219623586-8c3a35b5-6475-49a3-a2f0-958b1ee8d160.mp4

[bartbutenaers]

Ah damn, I had updated the readme page but seems I have forgotten to push my changes... It is now available in the enable-mesh branch.

You can also use an update_mesh message with a parent property, to link meshes to a transform node afterwards.

But I am not going to implement the entire BabylonJs interface. This ui node is made for the old Node-RED AngularJs dashboard is end of life for already quite some time. When I have free time, I will focus on migrating to Flexdash. That is the reason why I am not going to spend too much of my (very limited) free time anymore in these old ui nodes.

But of course pull requests are always welcome.

[dheeju143]

Thanks I will look into it

[dheeju143]

@bartbutenaers I look into the 3D on which is sounds good!!

i would like you ask more adding on features on below would be great.

1. X,Y,Z axis view representation in 3d drawing.
2. do we have any annotations where we can click on object to and view zoom position or get the customize text to view it.

[bartbutenaers]

I look into the 3D on which is sounds good!!

Do you mean that you have tested my changes, and it is working correctly so I can publish it on npm?

1. X,Y,Z axis view representation in 3d drawing.

Do you mean something different compared to the current axes viewer possibilities?

do we have any annotations where we can click on object to and view zoom position or get the customize text to view it.

I see here in my code that I have added at the time being a gui control for text. Which means for the command create_gui_control and payload.type textBlock and some text inside payload.defaultValue. But of course this is static text. Don't see anything like you want at first sight. But perhaps you can find something that we can use...

[dheeju143]

@bartbutenaers Yeah I will find out and let you know if I can have anything of annotations

[dheeju143]

@bartbutenaers Yes the updated code is working fine you can publish it on npm

[dheeju143]

@bartbutenaers any sample flow is there for GUI control for text block would be great!

[bartbutenaers]

Thanks for testing! I had forgotten that this node is not available on npm, so I have simply merged the "enable-mesh" branch into the master branch.

About the GUI control for text block. I saw this evening that there were some bugs and some required features were missing. So I have added them on a new "textblock-extension" branch. However it doesn't work for some reason. And unfortunately I don't have enough free time to digg further into this. The problem is that the linkWithMesh does not work: I link the textbox to a specified mesh, and then it should appear on top of that mesh (and also track the mesh if it moves). However it doesn't appear on top of the mesh. I don't know why...

This was my test flow that I created tonight for this new branch:

[{"id":"a12627a6.c0b228","type":"ui_babylon_js","z":"6de43ccfaf136eb5","name":"BabylonJs widgets","group":"ac886c83.c74f1","order":2,"width":"12","height":"9","folder":"","filename":"","outputField":"payload","actions":[],"showBrowserErrors":true,"startupCommands":"[{\"command\":\"create_camera\",\"type\":\"arcRotate\",\"name\":\"my_arcRotate_cam\",\"position\":{\"x\":100,\"y\":100,\"z\":100},\"targetPosition\":{\"x\":0,\"y\":0,\"z\":0},\"active\":true},{\"command\":\"create_mesh\",\"type\":\"box\",\"name\":\"my_box\",\"meshOptions\":{\"width\":30,\"height\":30,\"depth\":30},\"position\":{\"x\":0,\"y\":0,\"z\":0}}]","_mcu":{"mcu":false},"x":890,"y":260,"wires":[[]]},{"id":"f878b6fb.09a598","type":"inject","z":"6de43ccfaf136eb5","name":"Create text block","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"create_gui_control\",\"type\":\"textBlock\",\"name\":\"my_textblock\",\"defaultValue\":\"hello babylonjs\",\"height\":\"30\",\"width\":\"120\",\"targetName\":\"my_box\",\"targetOffsetX\":10,\"targetOffsetY\":50,\"horizontalAlignment\":\"right\",\"resizeToFit\":false,\"textHorizontalAlignment\":\"center\",\"textVerticalAlignment\":\"center\",\"outlineWidth\":2,\"outlineColor\":\"red\",\"color\":\"white\",\"fontSize\":30}","payloadType":"json","_mcu":{"mcu":false},"x":660,"y":260,"wires":[["a12627a6.c0b228"]]},{"id":"ac886c83.c74f1","type":"ui_group","name":"Gui control demo","tab":"956f2124.271f6","order":2,"disp":true,"width":"12","collapse":false},{"id":"956f2124.271f6","type":"ui_tab","name":"BabylonJs Widgets","icon":"dashboard","disabled":false,"hidden":false}]

[dheeju143]

ok Nice. meanwhile i will also check the Flow and test it.