I've recently delved into the world of Three.js within a Next.js environment.
Struggling with making the scroll feature work though.
After following a YouTube tutorial on designing (referenced below), I encountered issues due to using React 5 instead of React 3, resulting in deprecated files that needed modification.
https://i.sstatic.net/pSb5I.png
To tackle the problem of the canvas not displaying in full screen, I had to add the following styling:
#canvas {
position: fixed;
width: 100%;
height: 100%;
background-color: #fbc926;
}
global.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Red+Hat+Mono:wght@500&display=swap");
* {
scroll-behavior: smooth;
}
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#HeaderBody {
background: rgba(255, 255, 255, 0);
position: absolute;
left: 0;
top: 0;
right: 0;
transition: background 0.5s ease;
z-index: 100;
}
#canvas {
position: fixed;
width: 100%;
height: 100%;
background-color: #fbc926...
index.js
import AppLayout from "./components/Layouts/AppLayout";
import { Canvas, useFrame } from "react-three-fiber";
import { Section } from "./components/THREE/section";
...