Color not visible for custom plane gizmo

Bugs
1

Base example
https://www.babylonjs-playground.com/#31M2AP#6
31M2AP_6

Standard Y plane gizmo
Extra code:

    gizmo.yPlaneGizmo.isEnabled = true

https://www.babylonjs-playground.com/#31M2AP#98
31M2AP_98

Custom Y plane gizmo
Extra code:

    // CUSTOM PLANE GIZMO
    const dragPlane = BABYLON.PlaneBuilder.CreatePlane(
        'dragPlane',
        { width: 0.1375, height: 0.1375, sideOrientation: 2 },
        gizmo.gizmoLayer.utilityLayerScene,
    )
    dragPlane.lookAt(BABYLON.Vector3.Up())
    dragPlane.material = gizmo.yPlaneGizmo._coloredMaterial
    gizmo.yPlaneGizmo.setCustomMesh(dragPlane)

https://www.babylonjs-playground.com/#31M2AP#99
31M2AP_99

2

Fixed that with this extra code:

    const gizmoLight = utilLayer._getSharedGizmoLight()
    gizmoLight.includedOnlyMeshes = gizmoLight.includedOnlyMeshes.concat(dragPlane)

https://www.babylonjs-playground.com/#31M2AP#101
31M2AP_101

I believe the documentation should be updated to mention that and suggest a way to manage hover state. Here is how I solved that for myself:


const createDragPlaneGizmoMesh = (planeDragGizmo: PlaneDragGizmo) => {
  const gizmoLayer = planeDragGizmo.gizmoLayer

  const planeDragMesh = DiscBuilder.CreateDisc(
    'dragPlane',
    {
      radius: 0.08,
      sideOrientation: 2,
    },
    gizmoLayer.utilityLayerScene,
  )
  planeDragMesh.lookAt(Vector3.Up())

  const mat = new StandardMaterial('dragPlane', gizmoLayer.utilityLayerScene)
  mat.diffuseColor = new Color3(0, 0.5, 0)
  mat.specularColor = new Color3(0, 0.4, 0)
  mat.alpha = 0.3

  const matHover = new StandardMaterial(
    'dragPlaneHover',
    gizmoLayer.utilityLayerScene,
  )
  matHover.diffuseColor = new Color3(0.2, 0.7, 0.2)
  matHover.alpha = 0.3

  const matActive = new StandardMaterial(
    'dragPlaneHover',
    gizmoLayer.utilityLayerScene,
  )
  matActive.diffuseColor = new Color3(0.3, 0.8, 0.3)
  matActive.alpha = 0.3

  planeDragMesh.material = mat
  let isHovered = false
  let isDragged = false
  const updateMaterial = () => {
    const material = isDragged ? matActive : isHovered ? matHover : mat
    planeDragMesh.material = material
  }

  gizmoLayer.utilityLayerScene.onPointerObservable.add(pointerInfo => {
    isHovered = pointerInfo.pickInfo?.pickedMesh === planeDragMesh
    updateMaterial()
  })
  planeDragGizmo.dragBehavior.onDragStartObservable.add(() => {
    isDragged = true
    updateMaterial()
  })
  planeDragGizmo.dragBehavior.onDragEndObservable.add(() => {
    isDragged = false
    updateMaterial()
  })

  const gizmoLight = gizmoLayer._getSharedGizmoLight()
  gizmoLight.includedOnlyMeshes = gizmoLight.includedOnlyMeshes.concat(
    planeDragMesh,
  )

  return planeDragMesh
}
3

Do you mind sending a PR to the doc?

Here is how: Improve Documentation - Babylon.js Documentation

4

@Deltakosh Would you be open to accept changes that support dragging state for all gizmo materials, expose those for use on custom meshes and automatically add/remove the gizmo meshes to the gizmoLight.includedOnlyMeshes? If so, I would rather add that instead of just document this workaround.

5

I’m open to it

let me ask @Cedric for confirmation

6

Sounds like a cool addition!

7

@Deltakosh @Cedric Is this going in the right direction? DX and UX improvements for Gizmos by edzis · Pull Request #8163 · BabylonJS/Babylon.js · GitHub

8

Thanks @edzis I’ll take a look at the PR shortly!

9

I’ve added a couple comments. Looks like a good start :slight_smile: