How can I add lightGizmo on react-babylonjs

Questions
, ,
1

I’am impressed this react-babylonjs update about gizmo

it is very simple and comportable

but i don’t know how to add lightGizmo

i thought it require babylonCoreLight and coreScene ,
however i can’t bring coreScene to lightGizmo component

please tell me how to add lightGizmo component

2

pinging @brianzinn , the mastermind behind the babylon-react vinding

3

Hi, I have to confess that I added Gizmo without really knowing all of the different ones available (the code was generated) and that one I couldn’t find in the docs ( Gizmos | Babylon.js Documentation (babylonjs.com)). By searching playgrounds I think you would just need to attach a light to it with a ref.

import React, { useRef } from 'react';

const GizmoLightComponent = () => {
  // useRef<Nullable<Light>>(null) in TypeScript
  const lightRef = useRef(null);
  return (
    <directionalLight ref={lightRef} .../>
    <lightGizmo light={lightRef.current} ... />
  )
}

Does that work? I saw in the constructor that it creates it’s own attachedMesh, so the reconciler will try to attach it to a mesh in the scene graph - we may need a custom prop to indicate not to do so. Something like

<lightGizmo ... autoAttach={false} />
2 Likes
4

thank you for reply @brianzinn

i try like this

<utilityLayerRenderer>
    <directionalLight   ref={DirectionalLightRef} ...>
       {lightRefInfo && (
                    <lightGizmo
                      key="lightGizmo"
                      light={lightRefInfo}
                      attachedMesh={modelMeshRef}
                    />
                  )}
   </directionalLight>
</utilityLayerRenderer>

there is no error, but lightGizmo also does not appear

it may be required autoAttach prop

how can i add autoAttach customProp to lightGizmo

if not, is there anything i try on this situation ??

1 Like
5

hi Maxx. Sorry, but I have been on vacation. This is fixed in 3.0.24, which was released today. Here is a code sandbox:
stoic-star-mj51p - CodeSandbox

lightGizmo

You can use useRef as well. Here is the part of the scene you need:

<directionalLight name='red-light' direction={...} ref={setLightRef}>
  <shadowGenerator mapSize={1024} shadowCastChildren>
    <icoSphere name='ico1' position={new Vector3(0, 2, 0)} />
  </shadowGenerator>
</directionalLight>

<utilityLayerRenderer>
  <gizmoManager thickness={3} rotationGizmoEnabled>
    <sphere name="sunMesh" diameter={1}>
      <lightGizmo light={lightRef} updateScale />
    </sphere>
  </gizmoManager>
</utilityLayerRenderer>

If you are declaratively assigning a mesh to the lightGizmo it will work, but don’t assign a node as it will fail with runtime error when the light is assigned.