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.

[0x62]

Hi @ffdead

Is it possible to do this with a different camera? My global canvas camera is a perspective camera, but I also need to render a fixed HUD over the viewport with an orthographic camera.

I've tried using the Hud element from Drei, but nothing gets rendered.

<GlobalCanvas>
  <Hud renderPriority={1}>
     <OrthographicCamera
        makeDefault
        position={[0, 0, 10]}
        zoom={1}
        left={-viewport.width / 2}
        right={viewport.width / 2}
        top={viewport.height / 2}
        bottom={-viewport.height / 2}
        near={0}
        far={20}
        name="hudCamera"
      />
      <!-- ...  meshes -->
  </Hud>
</GlobalCanvas>

The same works fine without r3f-scroll-rig

[ffdead]

Hi @0x62

Sure, you can use the HUD component out of the box. You just need to make sure to pick a render priority higher than the priority the scroll-rig uses to render the global scene:

 <GlobalCanvas
        // the global render has priority 1000 by default
        // you can change it to any priority - but make sure HUD renders after
        globalPriority={1000} // default
 >
        <ambientLight intensity={3} />
        <Hud renderPriority={1001}>
          <OrthographicCamera makeDefault position={[0, 0, 1]} top={-1} left={-1} right={1} bottom={1} />
          <HudMesh />
        </Hud>
</GlobalCanvas>

https://codesandbox.io/p/sandbox/scrollrig-drei-hud-rqdgm3

Note: when using the Hud component without the scroll-rig - you have to set the first HUD's priotiry to 1 - this is so that it can take over the render loop and also render the default scene. The scroll-rig already has a global render loop that renders the default scene, that's why you just need to make sure the HUD renders after it.

[cywtf]

@ffdead what is a good way to send <MyPersistentObject /> to the back of the scroll-rig?
We cant add css classes in the style of z-index to layer them inside the GlobalCanvas. I find that no matter where I put <MyPersistentObject /> in the DOM, it gets rendered on top of whatever I have inside the scroll-rig.

[ffdead]

Hi!

Yes you have to position it they way you would in a three.js scene.

Either by moving it in Z-axis, or if you are working with planes, you can set the Mesh renderOrder={1} property which lets you control the order the meshes are rendered. You might need to set depthTest={false} on the material too for the renderOrder to take effect.

Note that transparent objects are ordered separately from non-transparent objects in threejs

[cywtf]

Thank you so much. That worked.