React-Three-Fiber isn't moving with scrolling

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";

...

Answer №1

Check out this helpful codesandbox if you're interested.

You might also want to explore the drei library's ScrollControl feature instead of replicating scrolling behavior.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I dynamically pass the color down to my style in Material UI?

I am facing a challenge with passing down a color dynamically in React and Material UI. I have been unable to find a suitable reference in my searches, including StackOverflow and the documentation. Exploration Material-ui hoverColor for MenuItem componen ...

Discover the step-by-step guide to setting up forwarding in React Router 5

Just diving into the world of React and TypeScript. I'm working with a component called Err. Is there a way to redirect it using React Router 5? import React, { FC, Fragment, useEffect } from "react"; const Err: FC<{ error: string }> = ({ erro ...

employing animation and iterating through each one for dynamic effect

Javascript $(document).ready(function() { $(".container").animate({left:'120px'}, 6000).queue(function(next){ $(".child").css('display', 'none'); }); }); The provided code snippet demonstrates animating a single box and t ...

Live Cursor Monitoring Feature in Autodesk Viewer

I am having some challenges setting up real-time cursor tracking in Autodesk Viewer. At times, there seems to be a gap between the cursor and the mesh. Additionally, when I rotate the project (particularly a building model in my case), the mesh either disa ...

CSS animation using a series of linked elements

Is there a way to make my buttons animate sequentially? For example, the second button should start animating only after the first one has finished. Any assistance would be greatly appreciated! a { padding: 6px; display: block; width: 50px ...

Arrange divs adjacent to each other without any gaps in between

My HTML code includes elements from Twitter Bootstrap and AngularJS framework. <div class="item item-custom-first"> <select class="form-control" style="display:inline; float:right" ng-model="requestdata.units ...

"Enhancing user experience by implementing Google Places Auto Complete feature that dynamically adjusts input

I have encountered an issue while using the react-places-autocomplete package. Every time I type something into the input field and suggestions appear, the entire input field jumps up, which disrupts the overall appearance. Is there a way to prevent the ...

Having trouble retrieving props in a functional component

Currently, I have set up a provider and context in my React project where the context extends firebase. import React from 'react'; const FirebaseContext = React.createContext(null); export const withFirebase = Component => props => ( & ...

jquery script that retrieves the href attribute of the anchor tag located near the button that is currently being clicked

Hello there! I am trying to extract the href of a link when the button next to it is clicked by the user. However, the challenge is that there are multiple buttons and links on the page. For example, if the first button is clicked, I want to display "www. ...

Animating range tick movements as the range thumb moves

My custom range input includes a span that displays the range's value and a div with multiple p elements acting as ticks. To create these ticks, I had to use a custom div because using "appearance: none" on the range hides the ticks by default. The ti ...

Next.js Image staying at the forefront

Currently, I am utilizing Tailwind CSS to style my Next.js website and incorporating the Next.js Image element for an image on the page. My goal is to display a modal over the existing page without completely blacking out the background; instead, I want i ...

Filtering out incomplete data before it is visible on the internet

Imagine a scenario where you are retrieving a dataset from an API, but one of the objects in the dataset is missing a crucial element. In this case, you would want to avoid displaying the object with incomplete data. Additionally, you may want to sort the ...

Guide on adding animation to an image in Bootstrap when hovering with the mouse

Is there a way to add animation to an image on my website when hovering over it without using CSS? Are there any specific bootstrap classes that allow for direct animations on elements? ...

Modify the color of the active class in Bootstrap

I am trying to modify the color of the active class in my HTML code as I create a nav sidebar. Here is the snippet from my code: <div class="col-sm-2"> <ul class="nav nav-pills nav-stacked nav-static"> <!--stacked for vertic ...

The CI environment encountered an error when building Expo, citing an issue with the babel-preset-expo configuration. Strangely, the builds run smoothly when

It's a classic case of "it works on my machine." I am currently working on developing two react-native apps, App A and App B. Both applications were initially bootstrapped using expo. Interestingly, when I run the command to build either app locally ...

Target the select element with a specific style applied, but restrict it to only be selected when nested within a div that shares the same style

Not quite sure about the effectiveness of the title, but here's what I'm attempting to accomplish. <div class="mystyle"> <select name="somename" id="somename"> <option value="Value1"> <option value="Value2" ...

JavaScript MP3 player

Could someone kindly point out where I went wrong? I am attempting to create an MP3 player using CSS, HTML, and JavaScript. Currently, the script only functions to start or stop the audio file. However, I keep encountering an error message: TypeError: docu ...

Tips on altering the input's background color using nextui?

I am currently facing an issue while working with NextJs, TailwindCss, and NextUI. When trying to use the inputs, I found the default white color unappealing. Despite numerous attempts to change the color in various ways, I still end up with this undesired ...

The coexistence of conflicting extensions, such as Metamask and Trust Wallet, both attempting to interact

I am working on developing a personal service that I want to integrate with browser extensions like Metamask and Trust Wallet, with the potential to include others in the future. However, I am facing challenges in finding resources on how to access the nec ...

Animation of lava effect in Angular 7

I have a unique Angular 7 application featuring a homepage with a prominent colored block at the top, along with a header and various images. My goal is to incorporate lava effect animations into the background similar to this CodePen example. If the link ...