#

luxiaotao1123

2024-04-19 8153f1b0588d03b7af956e746bde328590277aff

#

 public/textures/cross.png

 public/textures/floor_02.png

 public/textures/grass.jpg

 public/textures/road.jpg

 public/textures/road2.jpg

 public/textures/surface.jpg

 public/textures/wall_pic5.jpg

 public/textures/wall_pic7.png

 src/components/house.jsx

@@ -1,8 +1,7 @@
import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { ThreeElements, useLoader, extend } from '@react-three/fiber';
import { extend } from '@react-three/fiber';
import { Geometry, Base, Subtraction, Addition } from '@react-three/csg';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
extend({ TextGeometry });

@@ -44,9 +43,7 @@

  // const texture = new THREE.TextureLoader().load('/static/wall_pic5.jpg');
  const texture = new THREE.TextureLoader().load(
    process.env.NODE_ENV == 'development'
      ? '/static/wall_pic5.jpg'
      : `/degital-twin-3d/static/wall_pic5.jpg`
    `/textures/wall_pic5.jpg`
  );
  console.log('env', process.env.NODE_ENV);

@@ -54,9 +51,7 @@
  texture.repeat.set(0.02, 0.02);

  const roofTexture = new THREE.TextureLoader().load(
    process.env.NODE_ENV == 'development'
      ? '/static/wall_pic7.png'
      : `/degital-twin-3d/static/wall_pic7.png`
    `/textures/wall_pic7.png`
  );
  roofTexture.wrapS = THREE.RepeatWrapping; // 水平方向重复
  roofTexture.wrapT = THREE.RepeatWrapping; // 垂直方向重复
@@ -64,45 +59,35 @@
  roofTexture.repeat.set(0.005, 0.005);

  const floorTexture = new THREE.TextureLoader().load(
    process.env.NODE_ENV == 'development'
      ? '/static/floor_02.png'
      : `/degital-twin-3d/static/floor_02.png`
    `/textures/floor_02.png`
  );
  floorTexture.wrapS = THREE.RepeatWrapping; // 水平方向重复
  floorTexture.wrapT = THREE.RepeatWrapping; // 垂直方向重复
  floorTexture.repeat.set(0.01, 0.01);

  const roadTexture = new THREE.TextureLoader().load(
    process.env.NODE_ENV == 'development'
      ? '/static/road2.jpg'
      : `/degital-twin-3d/static/road2.jpg`
    `/textures/road2.jpg`
  );
  roadTexture.wrapS = THREE.RepeatWrapping; // 水平方向重复
  roadTexture.wrapT = THREE.RepeatWrapping; // 垂直方向重复
  roadTexture.repeat.set(5, 1);

  const grassTexture = new THREE.TextureLoader().load(
    process.env.NODE_ENV == 'development'
      ? '/static/grass.jpg'
      : `/degital-twin-3d/static/grass.jpg`
    `/textures/grass.jpg`
  );
  grassTexture.wrapS = THREE.RepeatWrapping; // 水平方向重复
  grassTexture.wrapT = THREE.RepeatWrapping; // 垂直方向重复
  grassTexture.repeat.set(20, 1);

  const surfaceTexture = new THREE.TextureLoader().load(
    process.env.NODE_ENV == 'development'
      ? '/static/surface.jpg'
      : `/degital-twin-3d/static/surface.jpg`
    `/textures/surface.jpg`
  );
  surfaceTexture.wrapS = THREE.RepeatWrapping; // 水平方向重复
  surfaceTexture.wrapT = THREE.RepeatWrapping; // 垂直方向重复
  surfaceTexture.repeat.set(0.01, 0.01);

  const crossTexture = new THREE.TextureLoader().load(
    process.env.NODE_ENV == 'development'
      ? '/static/cross.png'
      : `/degital-twin-3d/static/cross.png`
    `/textures/cross.png`
  );
  crossTexture.wrapS = THREE.RepeatWrapping; // 水平方向重复
  crossTexture.wrapT = THREE.RepeatWrapping; // 垂直方向重复

 src/pages/base.jsx

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

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