#

luxiaotao1123

2024-04-19 2081c72249f7e3707e1b3a2fdfba696688858d4b

#

 src/components/grid.jsx

New file
@@ -0,0 +1,24 @@
import React from 'react';
import { Grid } from '@react-three/drei';

const GridModule = (gridConfig) => {
  return (
    <Grid
      args={[100000, 100000, 100, 100]}
      rotation={[0, 0, 0]}
      position={[0, -10, 0]}
      receiveShadow
      cellColor="#6f6f6f"
      cellSize={50}
      sectionSize={100}
      sectionThickness={1}
      cellThickness={1}
      sectionColor="#9d4b4b"
      fadeDistance={10000}
      material={<meshStandardMaterial color="#aa" />}
      {...gridConfig}
    ></Grid>
  );
};

export default GridModule;

 src/pages/base.jsx

@@ -7,6 +7,7 @@
import Camera from '@/components/camera'
import Buildings from '@/components/buidings'
import TreeGroup from '../components/tree-group'
import GridModule from '../components/grid'

const Base = (props) => {
    return (
@@ -22,6 +23,7 @@
                <Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} />
                <Buildings />
                <TreeGroup />
                <TreeGroup />
                <Box position={[0, 0, 0]} />
                <OrbitControls />
                <Environment background preset="warehouse" />