Native html scroll and @tresjs/cientos Html component behaviour

estubmo commented 10 months ago

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

[X] I agree to follow this project's Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

alvarosabu commented 10 months ago

Hey @JaimeTorrealba could you support @estubmo here please?

JaimeTorrealba commented 10 months ago

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? :)

Tresjs / tres