css React-Three-光纤不滚动

我已经开始在Next.js上学习Three.js。
"虽然我无法启动卷轴"
我在Youtube上看了一个关于如何创建设计的教程（如下所示），虽然那个版本使用了React 3，我已经安装了React 5，很多文件已经贬值，所以不得不改变某些模块。

我还必须添加此样式，因为它不会全屏显示画布：

#canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fbc926;
}

全局.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;
    }
    
    .Title {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      text-align: center;
      color: white;
      font-family: "Montserrat", sans-serif;
      font-weight: 700;
      text-shadow: 2px 2px rgba(0, 0, 0, 0.329);
    }
    
    .scrollArea {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      overflow: auto;
    }

索引.js

import AppLayout from "./components/Layouts/AppLayout";
import { Canvas, useFrame } from "react-three-fiber";
import { Section } from "./components/THREE/section";
import { Physics, useBox, usePlane } from "@react-three/cannon";
import { RoundedBox, Html } from "@react-three/drei";
import { useRef, useEffect } from "react";
import { Suspense } from "react/cjs/react.production.min";
import state from "./components/THREE/state";

const HTMLContent = ({ children, domContent, modelPath, positionY }) => {
  const ref = useRef();
  useFrame(() => (ref.current.rotation.y += 0.01));
  return (
    <Section factor={1.5} offset={1}>
      <group position={[0, positionY, 0]}>
        <mesh>
          <RoundedBox
            ref={ref}
            args={[70, 70, 70]}
            radius={0.05}
            smoothness={4}
          >
            <meshPhongMaterial attach="material" color="" />
          </RoundedBox>
        </mesh>
        <Html portal={domContent} fullscreen>
          {children}
        </Html>
      </group>
    </Section>
  );
};

export default function Home({ Component, pageProps }) {
  const domContent = useRef();
  const scrollArea = useRef();
  const onScroll = (e) => (state.top.current = e.target.scrollTop);
  useEffect(() => void onScroll({ target: scrollArea.current }), []);

  return (
    <div>
      <div id="canvas">
        <Canvas colorManagement camera={{ position: [0, 0, 120], fov: 70 }}>
          <ambientLight intensity={0.6} />
          <Suspense fallback={null}>
            <HTMLContent positionY={250}>
              <div className="bg-[#fbc926]">
                <h1 className="Title"> WE 'EAR' IT, WE MAKE IT!</h1>
              </div>
            </HTMLContent>
            <HTMLContent positionY={500}>
              <div className="bg-[red]">
                <h1 className="Title"> WE 'EAR' IT WE MAKE IT </h1>
              </div>
            </HTMLContent>
          </Suspense>
        </Canvas>
        <div className="scrollArea" ref={scrollArea} onScroll={onScroll}>
          <div style={{ position: "sticky", top: 0 }} ref={domContent}></div>
          <div style={{ height: `${state.pages * 100}vh` }}></div>
        </div>
      </div>
    </div>
  );
}

css React-Three-光纤不滚动

1条答案

相关问题

热门标签

最新问答