I have been trying to add a ScrollControler and Scroll area to my app. I just keep running into the same issue.
| R3F: Div is not part of the THREE namespace! Did you forget to extend?
I tried extending it, adding the Html import from react-three/drei, I also tried moving my from , but still running into the same issue.
import './App.css';
import { extend } from '@react-three/fiber'
import { ScrollControls, Scroll } from '@react-three/drei'
import { Html } from '@react-three/drei';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
extend({ ScrollControls, })
function App() {
return (
<>
<color attach="background" args={['#000000']} />
<ScrollControls pages={6} damping={0.25}>
<Scroll>
</Scroll>
<Scroll>
<Container style={{ position: 'relative' }}>
<Row className='text-center align-items-center justify-content-center' style={{ position: 'absolute', width: '100vw', height: '100vh', padding: '0px 30px 0px' }}>
<Col xs={6}>
<Html>
<div>
<h1 style={{ marginBottom: '0px' }}>Life can be a struggle</h1>
</div>
</Html>
</Col>
</Row>
</Container>
</Scroll>
</ScrollControls >
</>
);
}
export default App;