How can I define Gizmo in React and Babylon JS, give me an initial boilerplate

Questions
, ,
10

ok, so the syntax looks like this:

const GizmoBox = ({position, color} = props) => (
  <box size={2} position={position}>
    <standardMaterial diffuseColor={color} specularColor={Color3.Black()} />
    <positionGizmo />
  </box>
)

export const Gizmo = () => (
  <div style={{ flex: 1, display: 'flex' }}>
    <Engine antialias adaptToDeviceRatio>
      <Scene>
        <freeCamera name='camera1' ... />
        <hemisphericLight name='light1' intensity={0.7} direction={Vector3.Up()} />
        <utilityLayerRenderer>
          <GizmoBox color={Color3.Red()} position={new Vector3(-2, 0, 0)} />
          <GizmoBox color={Color3.Yellow()} position={new Vector3(2, 0, 0)} />
        </utilityLayerRenderer>
      </Scene>
    </Engine>
  </div>
)

The gizmos will automatically find their UtilityLayerRenderer and mesh to attach to.

Looks like this:

image
image984×439 13.4 KB

I just published 3.0.20, which also has the declarative shadow casting from above. Appreciate any feedback. If you want to attach to a node instead of a mesh then I will need to add additional custom properties to Gizmo. Maybe attachToMesh or attachToNode to make that option declarative.

2 Likes