light,Scene Gizmo does not appear

[slash9494]

i add light, scene gizmo on react-babylon but it might be required more condition or bug? i arrange like this

 <Scene>
  <utilityLayerRenderer>
      <arcRotateCamera
            name="camera1"
            ref={cameraRef}
            alpha={alpha || Math.PI / 2}
            beta={Math.PI / 2}
            radius={9.0}
            target={Vector3.Zero()}
            minZ={0.001}
          >
            <cameraGizmo
              key="cameraGizmo"
              camera={cameraRef.current}
              scaleRatio={3}
            />
     </arcRotateCamera>
   </utilityLayerRenderer>
</Scene>

but gizmo is not appear

i searched on babylon-forum and i found you propose adding custom prop, autoAttach=false but i don't know how to apply this custom prop

i hope you try to solve this gizmo issue

[brianzinn]

I’ll fix that this week - thank you for reporting and sharing the code.

[brianzinn]

@slash9494 i have made a bunch of changes, but unsure what the expected behaviour is - can you share a Babylon playground with imperative version and then I will double check and publish this new version? For example I don’t see how you are attaching to a mesh - I am unfamiliar with the camera gizmo, did you mean to put a transformNode in the scene to attach and disable pointer drag events?

[slash9494]

I just attach light or camera gizmo on the scene, and can handle gizmo direction, position like this playground https://playground.babylonjs.com/#20OAV9#3731 - simple spot light gizmo

Actually, i have tried light gizmo at first, so i follow your opened storybook code like this

and your suggestion that light or camera gizmo may be required autoAttach custom prop but i don't know how to add this props 😂

so i tried to apply attached mesh that is currently on model through utilityLayerRenderer

but it doesn't worked..

so now, i just has applied light gizmo through "onCreated' prop

it is original imperative version

i hope it's helpful to solve this issue

[brianzinn]

I have added GizmoManager that looks to somewhat support your last example. I haven't used GizmoManager before, but have a look at this example:

export const GizmoManager = () => {
  const lightRef = useRef(null);
  return (
    <div style={{ flex: 1, display: 'flex' }}>
      <Engine antialias adaptToDeviceRatio canvasId='babylonJS' >
        <Scene>
          <arcRotateCamera name='arc' target={new Vector3(0, 1, 0)}
            alpha={-Math.PI / 2} beta={(0.5 + (Math.PI / 4))}
            radius={10} minZ={0.001} wheelPrecision={50}
          />
          <hemisphericLight name='hemi' direction={new Vector3(0, -1, 0)} intensity={0.8} />
          <Inspector />
          <utilityLayerRenderer>
            <gizmoManager thickness={3} positionGizmoEnabled>
              <spotLight name='red-light' direction={new Vector3(0, 0, Math.PI)} intensity={8} angle={102} exponent={5}
                diffuse={Color3.Red()}
                specular={Color3.Red()}
                position={new Vector3(0, 5, 0)}
              >
                <shadowGenerator mapSize={1024} useBlurExponentialShadowMap blurKernel={32} shadowCastChildren>
                  <icoSphere name='ico1' position={new Vector3(0, 2, 0)} diffuseColor={Color3.Red()} />
                </shadowGenerator>
              </spotLight>
              <lightGizmo light={lightRef.current} updateScale skipAutoAttach={true} />
            </gizmoManager>
          </utilityLayerRenderer>
          <ground name='ground1' width={15} height={15} subdivisions={2} receiveShadows />
        </Scene>
      </Engine>
    </div>
  )
}

I noticed at if I clicked a different mesh that the attached mesh seemed to change, so maybe that's why you have that observable being added, but that looks like it would add too many times - but I didn't set usePointerToAttachGizmos to false - maybe that was it? It's not on NPM, but if that looks good then I can publish a new version for you. Cheers.

[slash9494]

yeah, maybe I think if I have several meshes , i should add observable feature and usePointerToAttachGizmos is also not founded on NPM. So it might be useful to use usePointerToAttachGizmos if i could

new version for this feature would be greatly appreciated

[brianzinn]

3.0.23 was just published. Let me know if that works for you (or what changes are needed). :)

[slash9494]

good, it worked well but I suggest it should be required light gizmo pointer? like this

if i click other mesh or anywhere on the scene , light gizmo disappear and i should know light direction through pointer

please resolve this issue

[brianzinn]

Can you share your code that shows the light gizmo? I can make needed changes or hopefully work backwards from a working example.

[slash9494]

i apply spot light gizmo with gizmo manager like this

and appear like this

but if i click model , position pointer is set on model and light gizmo disappear

So i try to apply as original version

and on Scene, spot light gizmo appear with spot light gizmo icon that i want

i think "usePointerToAttachGizmos" of gizmo manager might have this icon

[brianzinn]

hi @slash9494 - I am able to click on meshes and maintain the light gizmo with the usePointerToAttachGizmos={false}.

Here is a code sandbox - are you able to reproduce your issue here? https://codesandbox.io/s/cranky-dan-32qec?file=/src/App.tsx

PS: I am console logging some debug stuff - i'll get that out of next version!

[slash9494]

yeah, click issue is resolved by usePointerToAttachGizmos={false}.

but gizmo icon is still not appear https://codesandbox.io/s/mystifying-kapitsa-5wqom?file=/src/App.tsx it is reproduced code but it doesn't worked...

here is babylon playground showing example https://playground.babylonjs.com/#1EIXWD#6

[brianzinn]

ok, so maybe it's fixed in 3.0.24! :) https://codesandbox.io/s/stoic-star-mj51p?file=/src/App.tsx

[slash9494]

that's great, it is good worked on above codesandbox

but i don't know why it doesn't worked on storybook of this repo even though it has been updated as recently commit and my private project has been also same even though i update version to 3.0.24

i guess lightGizmo is not worked

[brianzinn]

@slash9494 For this repo I can see you are running the old version (since I removed those console logs 😄). You need to run yarn build in the root directory to re-generate the project dist. Then in the storybook directory it will use the latest build :) I don't know why it's not working for your local project though - are you able to share a repro or snippet?

[slash9494]

perfect, i might have mistake on my priavate project, it is great worked on every repo

thanks brianzinn

umm, at last, i want to ask one more question

now i want that lightmesh ( sphere in the gizmo manager ) is invisible, just showing lightGizmo so i tried to apply <sphere isVisible={false}/> and sphere was done invisible but i can't move my lightGizmo

and now, i apply other method that apply visibility={0.0001} it has been worked but when i scroll to far on the scene, i can't click sphereMesh because it is too small even though lightGizmo is still same scale because of updateScale. So, is it somthing to apply invisible sphereMesh with updateScale

[brianzinn]

If you use <abstractMesh .../> instead of <sphere ../> then the mesh isn't visible, but then there is nothing to click on. It looks like you need a mesh for clicking. One thing you could do is LERP the position of the sphere towards/away from the camera position on every frame - for a directional camera mesh it makes sense, but not a spotlight as much. It may be a better question to ask in the babylonjs forum as there is a good chance to get more (and better) options from the community with more Gizmo experience!

Thanks for all of your help with reproductions - it took a few tries, but glad it is working.