#

luxiaotao1123

2024-04-24 ef1c6cacf5aa4b2bcce35eb3b7bae2db95692edd

 src/components/house.jsx

@@ -1,17 +1,18 @@
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';
import { DEBUG } from '../config/setting';
extend({ TextGeometry });

const House = (props) => {
  const {
    wallThickness = 2,
    width = 1400,
    length = 1200,
    height = 400,
    wallOpacity = .6,
    width = DEBUG ? 14000 : 1400,
    length = DEBUG ? 12000 : 1200,
    height = DEBUG ? 4000 : 400,
    aside_width = 130,
    aside_length = 130,
    position = new THREE.Vector3(200, 0, 0),
@@ -44,19 +45,14 @@

  // 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);

  texture.wrapS = THREE.RepeatWrapping; // 水平方向重复
  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 +60,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; // 垂直方向重复
@@ -446,7 +432,7 @@
            { depth: wallThickness },
          ]}
        />
        <meshPhongMaterial map={texture} metalness={1.0} reflectivity={1.5}></meshPhongMaterial>
        <meshPhongMaterial map={texture} metalness={1.0} reflectivity={1.5} transparent={true} opacity={wallOpacity}></meshPhongMaterial>
      </mesh>
      {/* 后面的路 */}
      <mesh rotation={[Math.PI / 2, 0, 0]}>
@@ -467,7 +453,7 @@
            { depth: wallThickness },
          ]}
        />
        <meshPhongMaterial map={texture} metalness={1.0} reflectivity={1.5}></meshPhongMaterial>
        <meshPhongMaterial map={texture} metalness={1.0} reflectivity={1.5} transparent={true} opacity={wallOpacity}></meshPhongMaterial>
      </mesh>
      {/* 前面的墙壁下面的路 */}
      <mesh rotation={[Math.PI / 2, 0, 0]}>
@@ -497,7 +483,10 @@
        receiveShadow
      >
        <extrudeGeometry args={[getBackWallShape(), { depth: wallThickness }]} />
        <meshPhysicalMaterial map={texture} metalness={1.0} roughness={0.8}></meshPhysicalMaterial>
        <meshPhysicalMaterial map={texture} metalness={1.0} roughness={0.8}
          transparent={true}
          opacity={wallOpacity}
        ></meshPhysicalMaterial>
      </mesh>
      <mesh rotation={[Math.PI / 2, 0, 0]}>
        <LeftRoad></LeftRoad>
@@ -532,6 +521,8 @@
          color={'#0069c5'}
          metalness={1.0}
          roughness={0.8}
          transparent={true}
          opacity={wallOpacity}
        ></meshPhysicalMaterial>
      </mesh>
      {/* 顶部第二层 */}
@@ -545,6 +536,8 @@
          color={'#4895f6'}
          metalness={1.0}
          roughness={0.8}
          transparent={true}
          opacity={wallOpacity}
        ></meshPhysicalMaterial>
      </mesh>
      {/* 顶部第三层 */}
@@ -558,6 +551,8 @@
          map={roofTexture}
          metalness={1.0}
          roughness={0.8}
          transparent={true}
          opacity={wallOpacity}
        ></meshPhysicalMaterial>
      </mesh>
    </group>