search

pmndrs / drei

🥉 useful helpers for react-three-fiber
https://docs.pmnd.rs/drei
MIT License
8.36k stars 699 forks source link

<Html /> becomes misaligned when placed in a grid #428

Open markryanbotha opened 3 years ago

markryanbotha commented 3 years ago

Problem description:

When I place a model inside a CSS grid, and I use the grid system to resize and place the item, the items within the Html tags are no longer aligned with the surface of the model.

When the page is resized, the items in the HTML tag also jump around.

Relevant code:

Here is the codesandbox with the code: https://codesandbox.io/s/mixing-html-and-webgl-w-occlusion-forked-ct4fl?file

This only seems to occur when the initial grid or row is not 1.

For example, this code works

.canvas {
  grid-row: 1/11;
  grid-column: 1/11;
}

However, this code does not

.canvas {
  grid-row: 4/11;
  grid-column: 4/11;
}

Please let me know if you are not meant to use containers with CSS to place react-three-fiber models

joshuaellis commented 3 years ago

Please provide a minimal reproduction of the issue, there's too much noise in this to understand filter down the issue.

markryanbotha commented 3 years ago

Updated sandbox - https://codesandbox.io/s/html-in-a-grid-system-o4grv?file=/src/styles.css

Apologies for accidentally closing the issue

joshuaellis commented 3 years ago

This is probably an issue with the transform prop. If I remove that I can see the HTML stays in the same place between canvas changes.

These props have come in through contributions and I find a lot of the math not incredibly straight forward. If you need keep the transform prop true, then you could look at using the calculatePosition prop to tweak the pos slightly?

donmccurdy commented 1 year ago

Related:

donmccurdy commented 1 year ago

I've opened a PR on three.js, attempting to fix an equivalent issue in THREE.CSS3DRenderer. I believe the same change could be applied to <HTML /> to fix the issue here, if someone would be interested in testing that. <HTML /> does not depend on CSS3DRenderer, so you'd need to modify <HTML /> directly.

github-actions[bot] commented 11 months ago

:tada: This issue has been resolved in version 9.88.15 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

CodyJasonBennett commented 11 months ago

Had to revert in #1724.

VonPappen commented 6 months ago

Any Update on this? I updated to the latest version but it still happening. I noticed that after resizing, when the HTML element becomes misalign, if i navigate to another tab and come back to my project tab, the HTML fixes itself.

github-actions[bot] commented 2 days ago

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!