Closed slash9494 closed 2 years ago
I’ll fix that this week - thank you for reporting and sharing the code.
@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?
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
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.
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
3.0.23 was just published. Let me know if that works for you (or what changes are needed). :)
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
Can you share your code that shows the light gizmo? I can make needed changes or hopefully work backwards from a working example.
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
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!
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
ok, so maybe it's fixed in 3.0.24! :) https://codesandbox.io/s/stoic-star-mj51p?file=/src/App.tsx
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
@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?
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
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.
i add light, scene gizmo on react-babylon but it might be required more condition or bug? i arrange like this
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 propi hope you try to solve this gizmo issue