I want to move background behind the model covering the whole section.
I have created a stackblitz sandbox [.tsx] for my project so that it is easy to understand the problem.
//App.tsx
import { Canvas } from '@react-three/fiber';
import { ScrollControls, Scroll } from '@react-three/drei';
import { Scene } from './components/Scene';
import { ScrollContainer } from './components/ScrollContainer';
function App() {
return (
<div className="w-full h-screen bg-gray-900">
<Canvas
camera={{ position: [0, 0, 5], fov: 75 }}
className="w-full h-full"
>
<ScrollControls pages={3} damping={0.1}>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} />
<Scene />
<Scroll html>
<ScrollContainer>
<div className="absolute inset-0 pointer-events-none" />
</ScrollContainer>
</Scroll>
</ScrollControls>
</Canvas>
</div>
);
}
export default App;
//ScrollContainer.tsx
import React from 'react';
import { ScrollSection } from './ScrollSection';
interface ScrollContainerProps {
children: React.ReactNode;
}
export function ScrollContainer({ children }: ScrollContainerProps) {
return (
<div className="h-[300vh]">
<div className="sticky top-0 h-screen">
{children}
</div>
<div className="px-4 py-8 space-y-96">
<ScrollSection
title="Dynamic Movement"
description="Watch as the object flows smoothly from side to side as you scroll."
/>
<ScrollSection
title="Fluid Animation"
description="The object dances through space with synchronized rotations and movements."
/>
{/* I want to add image background behind the model but text in front of model only for this section*/}
<ScrollSection
title="Color Transitions"
description="Experience smooth color transitions as the object moves through its path."
variant="with-background"
/>
</div>
</div>
);
}
Fuild animation text is correct as it is front the model. But last text and background of text should be behind the model. Basically I don't want I want some DOM elements infront of model and some DOM behind the model. So far DOM is only appearing in front of model that is in <Scroll html> </Scroll> tags