From 28f9d6aadef16cafb888ff6bcc97f99bde971d8d Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 10 五月 2024 13:58:20 +0800
Subject: [PATCH] #
---
src/components/house.jsx | 55 +++++++++++++++++++++++++------------------------------
1 files changed, 25 insertions(+), 30 deletions(-)
diff --git a/src/components/house.jsx b/src/components/house.jsx
index d41a378..293604d 100644
--- a/src/components/house.jsx
+++ b/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>
--
Gitblit v1.9.1