Native html scroll and @tresjs/cientos Html component behaviour
estubmo opened this issue · comments
Describe the bug
Say I want to have scrollable native html on my page, while keeping the canvas static while also using @tresjs/cientos Html component on some meshes in the scene. (Not using ScrollController)
I would like for the Html on the box to stay relative to it's Mesh while scrolling.
As of now, this Html will also scroll with the page.
Reproduction
https://codesandbox.io/p/devbox/tresjs-cientos-html-component-issue-ztftnn
Steps to reproduce
Run the sandbox and scroll.
There are two text elements.
<div
:style="{
height: '200vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '5rem',
}"
>
This should scroll
</div>
and
<TresMesh :position="[1, 1, 1]">
<TresBoxGeometry />
<TresMeshNormalMaterial />
<Html
center
transform
:distance-factor="4"
:position="[0, 0, 0.65]"
:scale="[0.75, 0.75, 0.75]"
>
<div>
<p>This should not scroll</p>
</div>
</Html>
</TresMesh>
I expect the first element to scroll, and the second to stay.
System Info
System:
OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 3.82 GB / 11.69 GB
Container: Yes
Shell: 3.6.1 - /usr/bin/fish
Binaries:
Node: 21.5.0 - ~/.local/share/nvm/v21.5.0/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 10.2.4 - ~/.local/share/nvm/v21.5.0/bin/npm
pnpm: 8.14.1 - ~/.local/share/pnpm/pnpm
bun: 1.0.7 - ~/.bun/bin/bun
Used Package Manager
pnpm
Code of Conduct
- I agree to follow this project's Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.
Hey @JaimeTorrealba could you support @estubmo here please?
unm, this is a good one. The problem here is that the HTML component doesn't create a 3D object, basically fake it, that's the reason why follow the natural flow.
We could add a fixed prop (or similar) to allow user do this, because now the styles are inline, so... No CSS classes will overwrite this.
Just for question, why not create a normal CSS element (outside TresJs) and apply position fixed? I know, it is just a workaround, but why not? :)