Mixing scrolling content with fixed content

[kaspervdm]

Hi,

I wondered if it was possible to combine both scrolling 3d elements with fixed elements?

As an example, say I want a 3D logo that is fixed on top of the viewport, how would I go about doing this?
At the moment I managed to work something out with the GlobalCanvas, but I noticed I needed to factor in the scale manually for those elements. Is this the right way to go?

let xyz = new vec3( state.viewport.width * state.viewport.factor, state.viewport.height * state.viewport.factor, 0 )

<MyModel ref={el} scale={xyz} position={[state.viewport.width * state.viewport.factor * -0.2, 0, 0]} />

I've looked at the sticky example, but my requirement would be that I can set "position: fixed" on the element. That does not seem to work.

Another use case would be an animated gradient background, but with scrolling content on top. That would probably require 2 canvas elements, I'm afraid.

Curious to learn what your approach would be, but maybe this is outside of the scope of this library?

[ffdead]

Hi @kaspervdm,

I think what you want to do is just place children inside the GlobalCanvas - the same way you would do with a vanilla R3F Canvas. You can use the size or viewport from useThree to size them responsively:

<GlobalCanvas>
   <MyPersistentObject />
</GlobalCanvas>

And MyPersistentObject could fill the entire viewport by doing something like this:

function MyPersistentObject() {
    const viewport = useThree(s => s.viewport)
    return (
        <mesh>
            <planeGeometry args={[viewport.width, viewport.height]} />
            <meshBasicMaterial color="red" />
        </mesh>
    )
}

You could also use useScrollbar() in your MyPersistentObject and react to scroll manually when needed.