HTML Distance Factor - Lock Certain Axis

[DenysAshikhin]

Hi,

First of, just wanted to say that this library is great and genuinely a joy to use (learning curve of being new to babylon and web 3d graphics aside of course).

I am using the HTML element and having issues with it being positioned how I want. The closest I figured out was playing with the distance_factor, however, it shifts the element up/down (relative to camera view port?) and stretches/shrinks the element. Is there a way to just have it not affect the placement of the element as I zoom in/out?

The scaling is fine, I can work with that, but the offset is the issue.

Thanks!

Demo: https://youtu.be/CMbx-1_Ts30

[brianzinn]

Thanks @DenysAshikhin - That is a good question and I think I understand from the linked video how you want the Html component to behave. Are you able to share a reproduction in code?

cc @dennemark

[dennemark]

Hi @DenysAshikhin I think you just need to remove distanceFactor, then it should work already. Or am I missing something?

I realize it is not a video how it should be, but the way you implemented it... :D So you want the HTML element to always have the same size as the person walking? DistanceFactor is currently the best way to achieve it. Would have to check, whats best way to implement it properly. I think for me a distance factor of 1 works out. To scale the inner HTML you could also use a style property like transform scale https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

[DenysAshikhin]

So not quite, the way I have it now, is I use a (normally invisible and tiny, but for demo purposes I made it white and big, which is overlayed on the person model. This serves as the anchor for the HTML element. However, when I zoom out the HTML element is way off from the actual model it's anchored too, but zoomed in it's okay.

Screenshots to show issue better:

This is why no distance-factory set at all.

@brianzinn is there a sandbox somewhere I can code in an example with react and babylon-react already setup? If so I can do it there, or would you prefer like a single .js file to plug in?

[brianzinn]

Yes - usually for issues to use code sandbox - ie: https://codesandbox.io/embed/magical-elgamal-hg02q0?codemirror=1

otherwise to fork this repo and use the storybook or website, but that is usually for library changes/fixes.

[DenysAshikhin]

Yes - usually for issues to use code sandbox - ie: https://codesandbox.io/embed/magical-elgamal-hg02q0?codemirror=1

otherwise to fork this repo and use the storybook or website, but that is usually for library changes/fixes.

I just added the Html in there, if you zoom out, you can see the div just goes wayyy of from the actual box it is linked to: https://codesandbox.io/s/great-fast-jo0klb?file=/src/App.tsx

[dennemark]

I see what you mean. This happens for me too, if I turn on the inspector in my app. I need to have a look at it next week. But my guess is, that it is related to the reference div or canvas that is used to calculate the position of the html element. To me it looks like, we get the relative position of the boxes on the canvas, but they are projected onto the parent div of the canvas.

[DenysAshikhin]

I'll keep an eye out here for any response/suggestion, but the expected (intuitively) interaction is the element stays the same size, and in the same place, and changing the distance_factor would change the scale/size (much how transform: scale() works based on camera zoom level?

Let me know if there is anything else I can do to help!

[dennemark]

I think I have it. Try position relative - makes sense for CSS.

<div style={{position:"relative"}}>
    <Engine antialias adaptToDeviceRatio canvasId="babylon-canvas">

Maybe we should include it in the examples with comment line. @DenysAshikhin

[DenysAshikhin]

It's better, but issue still persists?

[brianzinn]

You can pass-through styles as well on the Engine - they should be attached to the canvas. I think it is:

<Engine style={{position:"relative"}}>
 ...
</Engine>

[DenysAshikhin]

You can pass-through styles as well on the Engine - they should be attached to the canvas. I think it is:

<Engine style={{position:"relative"}}>
 ...
</Engine>

I feel like I'm missing something:

It looks like it's keeping it in the same spot on the canvas? But that's not correct since as you zoom out, the distance from the box and the div still increases...

[brianzinn]

something is not working with the style on <Engine... /> - I can look at that separately. Definitely seeing the inspector mess things up though, so looks related.

[DenysAshikhin]

Sounds good, again, let me know if there's anything else I can do to help out/troubleshoot/test

[dennemark]

I think these issues happen, because of the #babylonScene css style with width and height at 80% in the style.css. https://codesandbox.io/s/nifty-dijkstra-xf7xwg

[DenysAshikhin]

Hey all,

That seems to have fixed the issue, I'll close this now, thanks for all your help!

Edit: For anyone in the future, if relevant, the fix was setting the 100%:

export const SceneWithSpinningBoxes = () => (
  <div style={{ position: "relative", width: "100%", height: "100%" }}>
    <Engine antialias adaptToDeviceRatio canvasId="babylon-canvas">
      <Scene>

Adding the edit in case the codesandbox link stops working in the future