如何在 React 中使用页面作为背景

Question

我从 3D 库中制作了一个组件 react-particles-webgl。我怎样才能把它作为我网页的背景。该网页由表单输入元素组成。

import React from 'react';
import Input from './components/Input';
import Navbar from './components/Navbar';
import BackGround from './components/BackGround';

function App() {
  return (
    <div className="App">
      <BackGround />
       <div className="conatiner">
         <Navbar />
         <Input />
      </ div>
    </div>
  );
}

export default App;

上面代码中BackGround就是组件。这里附上后台组件的代码

import React from "react";
import ParticleField from "react-particles-webgl";

function BackGround() {
 
  const config = {
    showCube: false,
    dimension: "2D",
    velocity: 2.5,
    boundaryType: "bounce",
    antialias: true,
    direction: {
      xMin: -1,
      xMax: 1,
      yMin: -1,
      yMax: 1,
      zMin: -1,
      zMax: 1
    },
    lines: {
      colorMode: "solid",
      color: "#3FB568",
      transparency: 0.9,
      limitConnections: true,
      maxConnections: 20,
      minDistance: 60,
      visible: true
    },
    particles: {
      colorMode: "solid",
      color: "#3FB568",
      transparency: 0.9,
      shape: "circle",
      boundingBox: "canvas",
      count: 300,
      minSize: 20,
      maxSize: 50,
      visible: true
    },
    cameraControls: {
      enabled: false,
      enableDamping: true,
      dampingFactor: 0.2,
      enableZoom: true,
      autoRotate: false,
      autoRotateSpeed: 0.3,
      resetCameraFlag: true
    }
  };

  return (
    <div className="background">
      <ParticleField config={config} />
    </div>
  );
}

export default BackGround;

Css 我使用的那个组件是-

.BackGround{
  position: absolute;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}

Answer 1

您不需要用背景组件包装您的应用程序 - 在其他组件之前呈现它，并使用 css 将 canvas 设置为背景。我猜想在位置绝对化它，然后 100vw 和 100vh 填满屏幕。最后设置 z-index 使其保持在所有内容之后。

import React from 'react';
import Input from './components/Input';
import Navbar from './components/Navbar';
import BackGround from './components/BackGround';

function App() {
  return (
    <div className="App">
      <BackGround />
      <Navbar />
      <Input />
    </div>
  );
}

export default App;

如何在 React 中使用页面作为背景

How to use a page as a background in React

reactjs

react-three-fiber