Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Native html scroll and @tresjs/cientos Html component behaviour #507

Open
5 tasks done
estubmo opened this issue Jan 11, 2024 · 2 comments
Open
5 tasks done

Native html scroll and @tresjs/cientos Html component behaviour #507

estubmo opened this issue Jan 11, 2024 · 2 comments
Labels
pending-triage Ticket is pending to be prioritised waiting for author

Comments

@estubmo
Copy link

estubmo commented Jan 11, 2024 •
edited

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
@alvarosabu
Copy link
Member

Hey @JaimeTorrealba could you support @estubmo here please?

@JaimeTorrealba
Copy link
Member

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.

image

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

@alvarosabu alvarosabu added waiting for author pending-triage Ticket is pending to be prioritised labels Mar 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
pending-triage Ticket is pending to be prioritised waiting for author
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@alvarosabu @estubmo @JaimeTorrealba