Axis along scne

Questions
, ,
1

image
image757×419 48.8 KB

Hello, it is possible to show x,y,z axis like are on this blender picture in Babylon? And grid with the squads behind.

2

About the grid you could use the babylon gridMaterial Grid Material | Babylon.js Documentation with 2 lines to do the red and green ones.

About the gizmo, you might be able to rely on this Gizmos | Babylon.js Documentation

3

Thanks a lot. I will try.

4

This could also help Second Camera does not call onLeftPickTrigger Action - #15 by sebavan thanks @ecoin :slight_smile:

5

@MrPeter. - yes, definitely, check out this demo.

The current full-proof solution is to use a separate Engine/Scene/Canvas/Camera. Which you can then extend to more than just Axis tool, to include other things, like Alignment tool as shown in screenshot below (select multiple furniture objects with Shift + Left Mouse for it to appear).

architecture-3d-planner
architecture-3d-planner1094×978 79.4 KB

The only down side is that you have to sync Camera view angles with the main scene. I can explain the details of the approach if you are interested.

1 Like
6

Wau nice, that is coded in Babylon.js? And what is name of this if i want google more about it?
image
I found this playground demo but it is soo complicated :smiley: It is possible to code it simplier?

7

Yes, it is as linked above, from 3Designer, and it uses similar code to PG below:

I created that PG initially, then Sebavan modified some logic related to Camera syncing.
The logic related to the creation of the axes themselves are within this block:

// Axes --------------------------------------------------------------------
....
// end Axes --------------------------------------------------------------------

In production, I have similar code, and it’s not much simpler, unfortunately. Just the nature of how Babylon.js constructs meshes. You can check the original PG to see how axes were created, which has less code.

The proper way to avoid complexity in Babylon, is to encapsulate all procedural code inside React Component, turning it into a black box, then forget about it (write once, use everywhere mentality). For example, here is the production implementation of the above demo:

    return (<>
      {enabledAxes &&
      <Scene key="1" {...sceneProps}>
        {({scene}) => <CameraAxes viewport={viewport1} appScene={this.scene} appCamera={this.camera} scene={scene}/>}
      </Scene>}
      {enabledAlign &&
      <Scene key="2" {...sceneProps}>
        {({scene}) => <AlignTool viewport={enabledAxes ? viewport2 : viewport1} appScene={this.scene} scene={scene}/>}
      </Scene>}
    </>)
8

image
image717×646 17 KB

I created this function for render grid but there is this error, can you help me?
image

9

Blender Ground Grid PG

10

Hello @MrPeter just checking in, was your question answered?