如何实现一个充满科技感的官网（二）

"use client";
import dynamic from "next/dynamic";import { Suspense, useEffect, useState } from "react";import { Layout } from "./Layout";
const ShaderGradient = dynamic(  () => import("shadergradient").then((mod) => mod.ShaderGradient),  { ssr: false });const View = dynamic(() => import("./View").then((mod) => mod.View), {  ssr: false,  loading: () => (    <div      className="w-full h-full bg-cover bg-center"      style={{ backgroundImage: "url(/images/loading-bg.png)" }}    ></div>  ),});
export default function GlobalBackground() {  const defaultProps: any = {    control: "props",    animate: "on",    brightness: 1.2,    cDistance: 3.6,    cameraZoom: 1,    color1: "#0600B8",    color2: "#9000E3",    color3: "#0B004F",    // embedMode: "off",    envPreset: "city",    // gizmoHelper: "hide",    grain: "off",    lightType: "3d",    reflection: 0.1,    shader: "defaults",    type: "waterPlane",    uSpeed: 0.2,    uTime: 0,    wireframe: false,    zoomOut: false,    toggleAxis: false,  };
  const [suspenseWebgl, setSuspenseWebgl] = useState(false);  useEffect(() => {    const canvas = document.createElement("canvas");    const gl =      canvas.getContext("webgl") || canvas.getContext("experimental-webgl");    if (gl) {      // 浏览器支持 WebGL      console.log("The browser does support WebGL");      setSuspenseWebgl(true);    } else {      console.log("The browser does not support WebGL");      // 浏览器不支持 WebGL    }  }, []);  return (    <>      {suspenseWebgl ? (        <Layout>          <View className="w-full h-full">            <Suspense fallback={null}>              <ShaderGradient {...defaultProps} />            </Suspense>          </View>        </Layout>      ) : null}    </>  );}

"use client";
import { useRef } from "react";import dynamic from "next/dynamic";const Scene = dynamic(() => import("./Scene"), { ssr: false });
const Layout = ({ children }: any) => {  const ref = useRef<any>();
  return (    <div      ref={ref}      className="fade-in"      style={{        position: "fixed",        top: 0,        left: 0,        width: "100%",        height: "100%",        zIndex: -1,        overflow: "auto",        touchAction: "auto",      }}    >      {children}      <Scene        style={{          position: "fixed",          top: 0,          left: 0,          width: "100%",          height: "100%",          pointerEvents: "none",        }}        eventSource={ref}        eventPrefix="client"        pixelDensity={1}        pointerEvents="none"      />    </div>  );};
export { Layout };

"use client";
import { ShaderGradientCanvas } from "shadergradient";import { Canvas } from "@react-three/fiber";import { Preload } from "@react-three/drei";import tunnel from "tunnel-rat";
const r3f = tunnel();
export default function Scene({ ...props }) {  // Everything defined in here will persist between route changes, only children are swapped
  return (    <ShaderGradientCanvas {...props}>      {/* @ts-ignore */}      <r3f.Out />      <Preload all />    </ShaderGradientCanvas>  );}

"use client";
import { forwardRef, Suspense, useImperativeHandle, useRef } from "react";import {  OrbitControls,  PerspectiveCamera,  View as ViewImpl,} from "@react-three/drei";import tunnel from "tunnel-rat";
const r3f = tunnel();
const Three = ({ children }: any) => {  return <r3f.In>{children}</r3f.In>;};
export const Common = ({ color }: any) => (  <Suspense fallback={null}>    {color && <color attach="background" args={[color]} />}    <ambientLight intensity={0.5} />    <pointLight position={[20, 30, 10]} intensity={1} />    <pointLight position={[-10, -10, -10]} color="blue" />    <PerspectiveCamera makeDefault fov={40} position={[0, 0, 6]} />  </Suspense>);
const View = forwardRef(({ children, orbit, ...props }: any, ref) => {  const localRef = useRef<any>(null);  useImperativeHandle(ref, () => localRef.current);
  return (    <>      <div ref={localRef} {...props} />      <Three>        <ViewImpl track={localRef}>          {children}          {orbit && <OrbitControls />}        </ViewImpl>      </Three>    </>  );});View.displayName = "View";
export { View };

import GlobalBackground from "@/components/GlobalBackground";
export default function Home() {  return (    <>      <GlobalBackground></GlobalBackground>      <div        className="min-h-screen bg-cover bg-center"        style={{ backgroundImage: "url(/svg/bg_n.svg)" }}      >        ....      </div>    </>  );}

pnpm add @react-three/drei @react-three/fiber shadergradient tunnel-rat