Merge branch 'master' into online

# Conflicts:
#	.fes.js

.fes.js

@@ -4,7 +4,11 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
+<<<<<<< HEAD
  * @LastEditTime: 2023-12-13 08:46:51
+=======
+ * @LastEditTime: 2024-01-04 10:35:21
+>>>>>>> master
  */
 // import { resolve } from 'path';
 import { join } from 'path';
@@ -54,6 +58,9 @@ export default defineBuildConfig({
                 },
             }
         },
+        server: {
+            host: "0.0.0.0"
+        },
     },
     alias: { PLS: join(__dirname, './src/plugins') },
     // { find: 'pls', replacement: resolve(__dirname, './src/plugins') },

README.md

@@ -45,6 +45,7 @@ ThreeJS大名鼎鼎的基于浏览器渲染，JavaScript语言的3D库。<br/><b
 
 ![展示](./preview/数字城市1.gif)
 ![展示](./preview/数字城市2.gif)
+![展示](./public/plugins/digitalCity/preview/city2.gif)
 ![展示](./preview/地球3.gif)
 ![展示](./preview/热力图2.gif)
 ![展示](./preview/热力图.gif)

src/plugins/digitalCity/common/HolographicMaterial.js

@@ -0,0 +1,249 @@
+/**
+ * Holographic material by Anderson Mancini - Dec 2023.
+ */
+import { ShaderMaterial, Clock, Uniform, Color, NormalBlending, AdditiveBlending, FrontSide, BackSide, DoubleSide } from 'three';
+
+class HolographicMaterial extends ShaderMaterial {
+
+  /**
+   * Create a HolographicMaterial.
+   *
+   * @param {Object} parameters - The parameters to configure the material.
+   * @param {number} [parameters.time=0.0] - The time uniform representing animation time.
+   * @param {number} [parameters.fresnelOpacity=1.0] - The opacity for the fresnel effect.
+   * @param {number} [parameters.fresnelAmount=1.0] - The strength of the fresnel effect.
+   * @param {number} [parameters.scanlineSize=15.0] - The size of the scanline effect.
+   * @param {number} [parameters.hologramBrightness=1.0] - The brightness of the hologram.
+   * @param {number} [parameters.signalSpeed=1.0] - The speed of the signal effect.
+   * @param {Color} [parameters.hologramColor=new Color('#00d5ff')] - The color of the hologram.
+   * @param {boolean} [parameters.enableBlinking=true] - Enable/disable blinking effect.
+   * @param {boolean} [parameters.blinkFresnelOnly=false] - Enable blinking only on the fresnel effect.
+   * @param {number} [parameters.hologramOpacity=1.0] - The opacity of the hologram.
+   * @param {number} [parameters.blendMode=NormalBlending] - The blending mode. Use `THREE.NormalBlending` or `THREE.AdditiveBlending`.
+   * @param {number} [parameters.side=FrontSide] - The rendering side. Use `THREE.FrontSide`, `THREE.BackSide`, or `THREE.DoubleSide`.
+   * @param {Boolean} [parameters.depthTest=true] - Enable or disable depthTest.
+   */
+
+  constructor(parameters = {}) {
+    super();
+
+    this.vertexShader = /*GLSL */
+      `
+      #define STANDARD
+      varying vec3 vViewPosition;
+      #ifdef USE_TRANSMISSION
+      varying vec3 vWorldPosition;
+      #endif
+    
+      varying vec2 vUv;
+      varying vec4 vPos;
+      varying vec3 vNormalW;
+      varying vec3 vPositionW;
+
+      #include <common>
+      #include <uv_pars_vertex>
+      #include <envmap_pars_vertex>
+      #include <color_pars_vertex>
+      #include <fog_pars_vertex>
+      #include <morphtarget_pars_vertex>
+      #include <skinning_pars_vertex>
+      #include <logdepthbuf_pars_vertex>
+      #include <clipping_planes_pars_vertex>
+
+      void main() {
+        
+        #include <uv_vertex>
+        #include <color_vertex>
+        #include <morphcolor_vertex>
+      
+        #if defined ( USE_ENVMAP ) || defined ( USE_SKINNING )
+      
+          #include <beginnormal_vertex>
+          #include <morphnormal_vertex>
+          #include <skinbase_vertex>
+          #include <skinnormal_vertex>
+          #include <defaultnormal_vertex>
+      
+        #endif
+      
+        #include <begin_vertex>
+        #include <morphtarget_vertex>
+        #include <skinning_vertex>
+        #include <project_vertex>
+        #include <logdepthbuf_vertex>
+        #include <clipping_planes_vertex>
+      
+        #include <worldpos_vertex>
+        #include <envmap_vertex>
+        #include <fog_vertex>
+
+        mat4 modelViewProjectionMatrix = projectionMatrix * modelViewMatrix;
+
+        vUv = uv;
+        vPos = projectionMatrix * modelViewMatrix * vec4( transformed, 1.0 );
+        vPositionW = vec3( vec4( transformed, 1.0 ) * modelMatrix);
+        vNormalW = normalize( vec3( vec4( normal, 0.0 ) * modelMatrix ) );
+        
+        gl_Position = modelViewProjectionMatrix * vec4( transformed, 1.0 );
+
+      }`
+
+    this.fragmentShader = /*GLSL */
+      ` 
+      varying vec2 vUv;
+      varying vec3 vPositionW;
+      varying vec4 vPos;
+      varying vec3 vNormalW;
+      
+      uniform float time;
+      uniform float fresnelOpacity;
+      uniform float scanlineSize;
+      uniform float fresnelAmount;
+      uniform float signalSpeed;
+      uniform float hologramBrightness;
+      uniform float hologramOpacity;
+      uniform bool blinkFresnelOnly;
+      uniform bool enableBlinking;
+      uniform vec3 hologramColor;
+
+      float flicker( float amt, float time ) {return clamp( fract( cos( time ) * 43758.5453123 ), amt, 1.0 );}
+      float random(in float a, in float b) { return fract((cos(dot(vec2(a,b) ,vec2(12.9898,78.233))) * 43758.5453)); }
+
+      void main() {
+        vec2 vCoords = vPos.xy;
+        vCoords /= vPos.w;
+        vCoords = vCoords * 0.5 + 0.5;
+        vec2 myUV = fract( vCoords );
+
+        // Defines hologram main color
+        vec4 hologramColor = vec4(hologramColor, mix(hologramBrightness, vUv.y, 0.5));
+
+        // Add scanlines
+        float scanlines = 10.;
+        scanlines += 20. * sin(time *signalSpeed * 20.8 - myUV.y * 60. * scanlineSize);
+        scanlines *= smoothstep(1.3 * cos(time *signalSpeed + myUV.y * scanlineSize), 0.78, 0.9);
+        scanlines *= max(0.25, sin(time *signalSpeed) * 1.0);        
+        
+        // Scanlines offsets
+        float r = random(vUv.x, vUv.y);
+        float g = random(vUv.y * 20.2, 	vUv.y * .2);
+        float b = random(vUv.y * .9, 	vUv.y * .2);
+
+        // Scanline composition
+        hologramColor += vec4(r*scanlines, b*scanlines, r, 1.0) / 84.;
+        vec4 scanlineMix = mix(vec4(0.0), hologramColor, hologramColor.a);
+
+        // Calculates fresnel
+        vec3 viewDirectionW = normalize(cameraPosition - vPositionW);
+        float fresnelEffect = dot(viewDirectionW, vNormalW) * (1.6 - fresnelOpacity/2.);
+        fresnelEffect = clamp(fresnelAmount - fresnelEffect, 0., fresnelOpacity);
+
+        // Blinkin effect
+        //Suggested by Octano - https://x.com/OtanoDesign?s=20
+        float blinkValue = enableBlinking ? 0.6 - signalSpeed : 1.0;
+        float blink = flicker(blinkValue, time * signalSpeed * .02);
+    
+        // Final shader composition
+        vec3 finalColor;
+
+        if(blinkFresnelOnly){
+          // finalColor = vec3(1.0,1.0,0);
+          finalColor = scanlineMix.rgb + fresnelEffect * blink;
+        }else{
+          finalColor = scanlineMix.rgb * blink + fresnelEffect;
+        }
+
+        gl_FragColor = vec4( finalColor, hologramOpacity);
+
+      }`
+
+    // Set default values or modify existing properties if needed
+    this.uniforms = {
+      /**
+       * The time uniform representing animation time.
+       * @type {Uniform<number>}
+       * @default 0.0
+       */
+      time: new Uniform(0),
+
+      /**
+       * The opacity for the fresnel effect.
+       * @type {Uniform<number>}
+       * @default 1.0
+       */
+      fresnelOpacity: new Uniform(parameters.fresnelOpacity !== undefined ? parameters.fresnelOpacity : 1.0),
+
+      /**
+       * The strength of the fresnel effect.
+       * @type {Uniform<number>}
+       * @default 1.0
+       */
+      fresnelAmount: new Uniform(parameters.fresnelAmount !== undefined ? parameters.fresnelAmount : 0.45),
+
+      /**
+       * The size of the scanline effect.
+       * @type {Uniform<number>}
+       * @default 1.0
+       */
+      scanlineSize: new Uniform(parameters.scanlineSize !== undefined ? parameters.scanlineSize : 8.0),
+
+      /**
+       * The brightness of the hologram.
+       * @type {Uniform<number>}
+       * @default 1.0
+       */
+      hologramBrightness: new Uniform(parameters.hologramBrightness !== undefined ? parameters.hologramBrightness : 1.0),
+
+      /**
+       * The speed of the signal effect.
+       * @type {Uniform<number>}
+       * @default 1.0
+       */
+      signalSpeed: new Uniform(parameters.signalSpeed !== undefined ? parameters.signalSpeed : 1.0),
+
+      /**
+       * The color of the hologram.
+       * @type {Uniform<Color>}
+       * @default new Color(0xFFFFFF)
+       */
+      hologramColor: new Uniform(parameters.hologramColor !== undefined ? new Color(parameters.hologramColor) : new Color("#00d5ff")),
+
+      /**
+       * Enable/disable blinking effect.
+       * @type {Uniform<boolean>}
+       * @default true
+       */
+      enableBlinking: new Uniform(parameters.enableBlinking !== undefined ? parameters.enableBlinking : true),
+
+      /**
+       * Enable blinking only on the fresnel effect.
+       * @type {Uniform<boolean>}
+       * @default false
+       */
+      blinkFresnelOnly: new Uniform(parameters.blinkFresnelOnly !== undefined ? parameters.blinkFresnelOnly : true),
+
+      /**
+       * The opacity of the hologram.
+       * @type {Uniform<number>}
+       * @default 1.0
+       */
+      hologramOpacity: new Uniform(parameters.hologramOpacity !== undefined ? parameters.hologramOpacity : 1.0),
+    };
+
+    this.clock = new Clock()
+    this.setValues(parameters);
+    this.depthTest = parameters.depthTest !== undefined ? parameters.depthTest : false;
+    this.blending = parameters.blendMode !== undefined ? parameters.blendMode : AdditiveBlending;
+    this.transparent = true;
+    this.side = parameters.side !== undefined ? parameters.side : FrontSide;
+
+  }
+
+
+  update () {
+    this.uniforms.time.value = this.clock.getElapsedTime();
+  }
+
+}
+
+export default HolographicMaterial;

src/plugins/digitalCity/common/utils.js

@@ -4,9 +4,9 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-11-09 09:33:51
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-28 15:17:58
+ * @LastEditTime: 2024-01-04 09:25:52
  */
-import { BufferAttribute } from 'three'
+import { BufferAttribute, Box3, Vector3, RepeatWrapping, Color, Mesh, PlaneGeometry, Vector2, DoubleSide, Material, MeshBasicMaterial, BufferGeometry, Matrix4 } from 'three'
 
 export const resetUV = (geometry) => {
 	geometry.computeBoundingBox()
@@ -22,6 +22,16 @@ export const resetUV = (geometry) => {
 	const Puvs = new Float32Array(PuvList)
 	geometry.setAttribute('uv', new BufferAttribute(Puvs, 2));
 }
+const randomUV = (geometry) => {
+	const numVertices = geometry.attributes.position.count
+	const uvArray = new Float32Array(numVertices * 2) // 2个值表示一个UV坐标
+	for (let i = 0; i < numVertices * 2; i += 2) {
+		uvArray[i] = Math.random() * 0.01
+		uvArray[i + 1] = Math.random() * 0.01
+	}
+	const uvAttribute = new BufferAttribute(uvArray, 2)
+	geometry.setAttribute('uv', uvAttribute)
+}
 
 export const setGeometryUVForm = (srcGeometry, toGeometry) => {
 	toGeometry.computeBoundingBox()
@@ -60,4 +70,75 @@ export const loadGeojson = (filepath, dataType) => new Promise((resolve, reject)
 			console.err(err)
 			reject(error)
 		});
-})
+})
+
+export const getBoxInfo = (mesh) => {
+	const box3 = new Box3()
+	box3.expandByObject(mesh)
+	const size = new Vector3()
+	const center = new Vector3()
+	box3.getCenter(center)
+	box3.getSize(size)
+	return {
+		size, center
+	}
+}
+export const toMeshSceneCenter = (mesh) => {
+	const { center, size } = getBoxInfo(mesh)
+	mesh.position.copy(center.negate().setY(0))
+}
+import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast } from 'three-mesh-bvh'
+export const initMeshBvh = () => {
+	BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
+	BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
+	Mesh.prototype.raycast = acceleratedRaycast;
+}
+
+//水面
+import { useTexture } from '@tresjs/core'
+import { Water } from 'three/addons/objects/Water2'
+export const setThreeWater2 = async (mesh) => {
+	const pTexture = await useTexture(['./plugins/water/images/Water_1_M_Normal.jpg', './plugins/water/images/Water_2_M_Normal.jpg'])
+	const waterGeometry = mesh.geometry.clone()
+	resetUV(waterGeometry)
+	waterGeometry.computeBoundsTree()
+	const tsWater = new Water(
+		waterGeometry,
+		{
+			color: new Color('#fff'),
+			scale: 20,
+			flowDirection: new Vector2(1, 1),
+			textureWidth: 1024,
+			textureHeight: 1024,
+			normalMap0: pTexture[0],
+			normalMap1: pTexture[1]
+		}
+	)
+	tsWater.material.transparent = true
+	tsWater.material.depthWrite = true
+	tsWater.material.depthTest = true
+	tsWater.material.side = DoubleSide
+	tsWater.material.uniforms.config.value.w = 20
+	tsWater.material.uniforms.reflectivity.value = 0.46
+	return tsWater
+}
+
+/**
+ * 锚点重置到中心
+ * @param {Object3D} mesh 
+ */
+export function reAnchorCenter (mesh) {
+	const geometry = mesh.geometry
+	const position = mesh.position
+	geometry.computeBoundingBox()
+	const center = new Vector3();
+	geometry.boundingBox.getCenter(center);
+	const m = new Matrix4();
+	m.set(1, 0, 0, center.x - position.x,
+		0, 1, 0, center.y - position.y,
+		0, 0, 1, center.z - position.z,
+		0, 0, 0, 1)
+	geometry.center();
+
+	mesh.position.applyMatrix4(m)
+}

src/plugins/digitalCity/components/buildings/buildingsModelCustomShader.vue

@@ -4,6 +4,8 @@ import { useRenderLoop } from '@tresjs/core'
 // import { CustomShaderMaterial } from '@tresjs/cientos'
 import CustomShaderMaterial from 'three-custom-shader-material/vanilla'
 import { ref, watchEffect, watch } from 'vue';
+import vertexShader from '../../shaders/buildingsCustomShaderMaterial.vert?raw'
+import fragmentShader from '../../shaders/buildingsCustomShaderMaterial.frag?raw'
 import * as THREE from 'three'
 const props = withDefaults(defineProps<{
 	model: any
@@ -50,51 +52,8 @@ const setEffectMaterial = () => {
 	}
 	const material = new CustomShaderMaterial({
 		baseMaterial: CITY_UNTRIANGULATED.material,
-		vertexShader: `
-		varying vec4 vPosition;
-		void main() {
-			vPosition = modelMatrix * vec4(position,1.0);
-			csm_Position = position * vec3(1.0);
-		}
-		`,
-		fragmentShader: `
-		uniform mat4 modelMatrix;
-		varying vec4 vPosition;
-		uniform vec3 uMax; 
-		uniform vec3 uMin; 
-		uniform float uOpacity;  
-		uniform float uBorderWidth; 
-		uniform vec3 uLightColor;
-		uniform vec3 uColor;
-		uniform float uCircleTime; 
-		uniform float uTime; 
-		uniform vec3 uTopColor;					//顶部颜色
-		uniform bool uGradient;
-		vec4 uMax_world;
-		vec4 uMin_world;
-		void main() {
-			// 转世界坐标
-			uMax_world =  modelMatrix * vec4(uMax,1.0);
-			uMin_world =  modelMatrix * vec4(uMin,1.0);
-			vec3 distColor = uColor;
-			float residue = uTime - floor(uTime / uCircleTime) * uCircleTime;
-			float rate = residue / uCircleTime;
-			float lightOffset = rate * (uMax_world.y - uMin_world.y);
-
-			if (uMin_world.y + lightOffset < vPosition.y && uMin_world.y + lightOffset + uBorderWidth > vPosition.y) {
-				csm_DiffuseColor = vec4(uLightColor, uOpacity);
-			} else {
-				csm_DiffuseColor = vec4(distColor, uOpacity);
-			}
-
-			//根据高度计算颜色
-			if(uGradient){
-				float rateHight = (vPosition.y - uMin_world.y) / (uMax_world.y - uMin_world.y); 
-				vec3 outColor = mix(csm_DiffuseColor.xyz, uTopColor, rateHight*2.0);
-				csm_DiffuseColor = vec4(outColor, uOpacity);
-			}
-    }
-		`,
+		vertexShader: vertexShader,
+		fragmentShader: fragmentShader,
 		silent: true, // Disables the default warning if true
 		uniforms: {
 			uMax: { value: max },

src/plugins/digitalCity/components/newBuildingsModel/buildingsMode.vue

@@ -0,0 +1,120 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-01-02 10:55:34
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-01-04 08:52:36
+-->
+<template>
+	<Suspense>
+		<primitive :object="group" :position="[1, 0, 1]" cast-shadow receive-shadow />
+	</Suspense>
+	<importantBuildings :group="group" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRenderLoop } from '@tresjs/core'
+import { Group, Color, DoubleSide, Mesh, EdgesGeometry, AdditiveBlending } from 'three'
+import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2.js'
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js'
+import { useGLTF } from '@tresjs/cientos'
+import CustomShaderMaterial from 'three-custom-shader-material/vanilla'
+import { setThreeWater2, initMeshBvh } from '../../common/utils'
+import vertexShader from '../../shaders/buildingsCustomShaderMaterial.vert?raw'
+import fragmentShader from '../../shaders/buildingsCustomShaderMaterial.frag?raw'
+import importantBuildings from './importantBuildings.vue'
+
+initMeshBvh()
+const { scene }
+	= await useGLTF('https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/model/digitalCity/shanghaiDraco.gltf',
+		{ draco: true },
+	)
+// console.log(scene)
+const group = scene.clone() as Group
+const timeDelta = ref(0)
+const setEffectMaterial = (mesh) => {
+	const { geometry } = mesh
+	geometry.computeBoundingBox()
+	geometry.computeBoundingSphere()
+	geometry.computeBoundsTree()
+	const { max, min } = geometry.boundingBox
+	const material = new CustomShaderMaterial({
+		baseMaterial: mesh.material,
+		vertexShader: vertexShader,
+		fragmentShader: fragmentShader,
+		silent: true,
+		uniforms: {
+			uMax: { value: max },
+			uMin: { value: min },
+			uBorderWidth: { value: 0.006 },
+			uCircleTime: { value: 3 },
+			uColor: {
+				value: new Color('#005c58')
+			},
+			uOpacity: {
+				value: 0.8
+			},
+			uLightColor: {
+				value: new Color('#990')
+			},
+			uTopColor: {
+				value: new Color('#888800')
+			},
+			uTime: timeDelta,
+			uGradient: {
+				value: true
+			}
+		},
+		depthWrite: true,
+		depthTest: true,
+		transparent: true,			//如果材质透明，那么楼宇就被渲染到后面了
+		side: DoubleSide,//双面渲染
+	})
+	mesh.material.dispose()
+	mesh.material = material
+}
+const setBuildsLine = (mesh) => {
+	const edges = new EdgesGeometry(mesh.geometry, 1000) // WireframeGeometry
+	let geometry = new LineSegmentsGeometry()
+	let wideEdges = geometry.fromEdgesGeometry(edges)
+	wideEdges.computeBoundsTree()
+	let edgesmaterial = new LineMaterial({
+		color: new Color('#000'),
+		linewidth: 0.8,
+		opacity: 0.6,
+		transparent: true,
+		depthWrite: true,
+		depthTest: true,
+	})
+	edgesmaterial.resolution.set(window.innerWidth, window.innerHeight)
+	mesh.add(new LineSegments2(wideEdges, edgesmaterial))
+}
+group.traverse(async (mesh: any) => {
+	mesh as Mesh
+	if (mesh.isMesh && (mesh.name.indexOf('Shanghai') !== -1 || mesh.name.indexOf('Object') !== -1)) {
+		if (mesh.name.indexOf('Floor') !== -1) {
+			//设置成地板材质
+			// mesh.material.color = new Color('#ff0')
+		} else if (mesh.name.indexOf('River') !== -1) {
+			//替换水的材质
+			const waterm = await setThreeWater2(mesh)
+			waterm.position.set(0, 0, 1800)
+			mesh.add(waterm)
+		} else {
+			setEffectMaterial(mesh)
+			setBuildsLine(mesh)
+			// mesh.castShadow = true
+			// mesh.receiveShadow = true
+		}
+	}
+})
+
+const { onLoop } = useRenderLoop()
+onLoop(({ delta }) => {
+	timeDelta.value += delta
+})
+
+</script>

src/plugins/digitalCity/components/newBuildingsModel/importantBuildings.vue

@@ -0,0 +1,128 @@
+<template></template>
+
+<script setup lang="ts">
+import { useRenderLoop } from '@tresjs/core'
+import HolographicMaterial from '../../common/HolographicMaterial'
+import { resetUV, reAnchorCenter } from '../../common/utils'
+import { Color, DoubleSide, AdditiveBlending, Mesh } from 'three'
+
+const props = withDefaults(defineProps<{
+	group: any
+}>(), {
+})
+
+const PARAMS = {
+	fresnelAmount: 0,
+	fresnelOpacity: 0.0,
+	scanlineSize: 15,
+	signalSpeed: 1.3,
+	hologramColor: "#e05b0f",
+}
+const holoMaterial = new HolographicMaterial({ blendMode: AdditiveBlending, hologramBrightness: 2.5, side: DoubleSide })
+holoMaterial.uniforms.fresnelAmount.value = PARAMS.fresnelAmount
+holoMaterial.uniforms.scanlineSize.value = PARAMS.scanlineSize
+holoMaterial.uniforms.signalSpeed.value = PARAMS.signalSpeed
+holoMaterial.uniforms.fresnelOpacity.value = PARAMS.fresnelOpacity
+holoMaterial.uniforms.hologramColor.value = new Color(PARAMS.hologramColor)
+holoMaterial.uniforms.enableBlinking.value = false
+holoMaterial.depthTest = true
+
+//关键建筑物
+let shzx, jmds, dfmzt = null
+const setImportantBuilds = () => {
+
+	const hqjrzx = props.group.getObjectByName('02-huanqiujinrongzhongxin_huanqiujinrongzhongxin_0')
+	hqjrzx.name = '环球金融中心'
+	hqjrzx.material.dispose()
+	resetUV(hqjrzx.geometry)
+	hqjrzx.material = holoMaterial
+
+	shzx = props.group.getObjectByName('01-shanghaizhongxindasha_shanghaizhongxindasha_0')
+	shzx.name = '上海中心'
+	shzx.material.dispose()
+	resetUV(shzx.geometry)
+	shzx.material = holoMaterial.clone()
+	shzx.material.uniforms.hologramColor.value = new Color('#006cf9')
+	shzx.material.uniforms.fresnelAmount.value = 1
+	shzx.material.uniforms.scanlineSize.value = 2.1
+	shzx.material.uniforms.signalSpeed.value = 0.4
+
+	jmds = props.group.getObjectByName('03-jinmaodasha_jjinmaodasha_0')
+	jmds.name = '金茂大厦'
+	jmds.material.dispose()
+	resetUV(jmds.geometry)
+	jmds.material = holoMaterial.clone()
+	jmds.material.uniforms.hologramColor.value = new Color('#5e0fe0')
+	jmds.material.uniforms.scanlineSize.value = 15
+	jmds.material.uniforms.signalSpeed.value = 0.18
+
+	dfmzt = props.group.getObjectByName('04-dongfangmingzhu_dongfangmingzhu_0')
+	dfmzt.name = '东方明珠塔'
+	dfmzt.material.dispose()
+	resetUV(dfmzt.geometry)
+	dfmzt.material = holoMaterial.clone()
+	dfmzt.material.uniforms.scanlineSize.value = 5.
+	dfmzt.material.uniforms.signalSpeed.value = 1.3
+	dfmzt.material.uniforms.hologramColor.value = new Color('#e00f0f')
+	dfmzt.material.uniforms.fresnelOpacity.value = 0.1
+	// dfmzt.material.transparent = true
+	// dfmzt.material.opacity = 0.16
+	// const newMeshGeometry = dfmzt.geometry.clone()
+	// resetUV(newMeshGeometry)
+	// const newMesh = new Mesh(newMeshGeometry, holoMaterial.clone())
+	// newMesh.material.uniforms.scanlineSize.value = 5.
+	// newMesh.material.uniforms.signalSpeed.value = 1.3
+	// newMesh.material.uniforms.hologramColor.value = new Color('#384400')
+	// newMesh.material.uniforms.fresnelOpacity.value = 0.1
+	// reAnchorCenter(newMesh)
+	// newMesh.scale.set(1.006, 1.006, 1.00)
+	// newMesh.translateZ(100)
+	// dfmzt.add(newMesh)
+}
+setImportantBuilds()
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+	holoMaterial.update()
+	shzx.material.update()
+	jmds.material.update()
+	dfmzt.material.update()
+})
+
+// import { Pane } from 'tweakpane'
+// const paneControl = new Pane({
+// 	title: '效果参数',
+// 	expanded: true,
+// })
+// paneControl.addBinding(PARAMS, 'fresnelAmount', {
+// 	min: 0,
+// 	max: 1,
+// 	step: 0.01,
+// }).on('change', (ev) => {
+// 	holoMaterial.uniforms.fresnelAmount.value = ev.value
+// })
+// paneControl.addBinding(PARAMS, 'scanlineSize', {
+// 	min: 1,
+// 	max: 15,
+// 	step: 0.1,
+// }).on('change', (ev) => {
+// 	holoMaterial.uniforms.scanlineSize.value = ev.value
+// })
+// paneControl.addBinding(PARAMS, 'signalSpeed', {
+// 	min: 0,
+// 	max: 1,
+// 	step: 0.01,
+// }).on('change', (ev) => {
+// 	holoMaterial.uniforms.signalSpeed.value = ev.value
+// })
+// paneControl.addBinding(PARAMS, 'fresnelOpacity', {
+// 	min: 0,
+// 	max: 1,
+// 	step: 0.1,
+// }).on('change', (ev) => {
+// 	holoMaterial.uniforms.fresnelOpacity.value = ev.value
+// })
+// paneControl.addBinding(PARAMS, 'hologramColor', { label: '圈颜色' }).on('change', (ev) => {
+// 	holoMaterial.uniforms.hologramColor.value = new Color(ev.value)
+// })
+</script>

src/plugins/digitalCity/components/roads/roadLight.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-24 10:36:23
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-28 15:05:39
+ * @LastEditTime: 2024-01-03 15:51:51
 -->
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'

src/plugins/digitalCity/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-26 09:20:42
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-28 15:08:32
+ * @LastEditTime: 2024-01-04 10:54:39
  */
 export default {
 	"name": "digitalCity",
@@ -29,5 +29,6 @@ export default {
 		{ "src": "plugins/digitalCity/preview/buildingsEffectA.png", "type": "img", "name": "buildingsEffectA", "title": "建筑物效果A" },
 		{ "src": "plugins/digitalCity/preview/buildingsMarkA.png", "type": "img", "name": "buildingsMarkA", "title": "建筑物标记A" },
 		{ "src": "plugins/digitalCity/preview/roadLines.png", "type": "img", "name": "roadLines", "title": "道路飞线" },
+		{ "src": "plugins/digitalCity/preview/city2.gif", "type": "img", "name": "city2", "title": "城市新模型" },
 	]
 }

src/plugins/digitalCity/pages/city2.vue

@@ -0,0 +1,37 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-10-24 09:49:39
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-01-04 09:48:22
+-->
+<template>
+	<TresCanvas shadows window-size clearColor="#333">
+		<TresPerspectiveCamera :position="[0.5, 2, 1.5]" :fov="45" :near="0.1" :far="100000" />
+		<OrbitControls />
+		<TresAmbientLight color="#ffffff" />
+		<TresDirectionalLight :position="[0, 3, 3]" :intensity="2" color="#ffffff" cast-shadow :shadow-mapSize-width="1024"
+			:shadow-mapSize-height="1024" />
+
+		<Suspense>
+			<buildingsMode />
+		</Suspense>
+
+		<Suspense>
+			<roadLight color='#ffffff' :radius="1.0" :speed="1.0" geoJson="plugins/digitalCity/geojson/secondarySmall.geojson"
+				:rotationY="1.3826597599330712" :scale="0.001025905404044292"
+				:position="[-1.877460474821603, 0.01, -1.5464791950519081]" />
+		</Suspense>
+		<TresGridHelper :args="[6, 10]" :position="[0, 0, 0]" />
+	</TresCanvas>
+</template>
+
+<script setup lang="ts">
+
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import buildingsMode from '../components/newBuildingsModel/buildingsMode.vue'
+import roadLight from '../components/roads/roadLight.vue'
+
+</script>

src/plugins/digitalCity/shaders/buildingsCustomShaderMaterial.frag

@@ -0,0 +1,36 @@
+uniform mat4 modelMatrix;
+varying vec4 vPosition;
+uniform vec3 uMax;
+uniform vec3 uMin;
+uniform float uOpacity;
+uniform float uBorderWidth;
+uniform vec3 uLightColor;
+uniform vec3 uColor;
+uniform float uCircleTime;
+uniform float uTime;
+uniform vec3 uTopColor;//顶部颜色
+uniform bool uGradient;
+vec4 uMax_world;
+vec4 uMin_world;
+void main(){
+	// 转世界坐标
+	uMax_world=modelMatrix*vec4(uMax,1.);
+	uMin_world=modelMatrix*vec4(uMin,1.);
+	vec3 distColor=uColor;
+	float residue=uTime-floor(uTime/uCircleTime)*uCircleTime;
+	float rate=residue/uCircleTime;
+	float lightOffset=rate*(uMax_world.y-uMin_world.y);
+	
+	if(uMin_world.y+lightOffset<vPosition.y&&uMin_world.y+lightOffset+uBorderWidth>vPosition.y){
+		csm_DiffuseColor=vec4(uLightColor,uOpacity);
+	}else{
+		csm_DiffuseColor=vec4(distColor,uOpacity);
+	}
+	
+	//根据高度计算颜色
+	if(uGradient){
+		float rateHight=(vPosition.y-uMin_world.y)/(uMax_world.y-uMin_world.y);
+		vec3 outColor=mix(csm_DiffuseColor.xyz,uTopColor,rateHight*2.);
+		csm_DiffuseColor=vec4(outColor,uOpacity);
+	}
+}

src/plugins/digitalCity/shaders/buildingsCustomShaderMaterial.vert

@@ -0,0 +1,5 @@
+varying vec4 vPosition;
+void main(){
+	vPosition=modelMatrix*vec4(position,1.);
+	csm_Position=position*vec3(1.);
+}

src/plugins/water/components/threeWater2.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-12-11 15:00:44
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-11 16:22:39
+ * @LastEditTime: 2024-01-03 10:57:44
 -->
 
 <template>
@@ -29,8 +29,9 @@ const props = withDefaults(defineProps<{
 
 const pTexture = await useTexture(['./plugins/water/images/Water_1_M_Normal.jpg', './plugins/water/images/Water_2_M_Normal.jpg'])
 
+const wG = props.waterGeometry.clone()
 const tsWater = new Water(
-	props.waterGeometry,
+	wG,
 	{
 		color: props.color,
 		scale: props.scale,
@@ -50,6 +51,7 @@ watchEffect(() => {
 		tsWater.material.uniforms.color.value.set(props.color)
 	}
 	if (props.scale) {
+		debugger
 		tsWater.material.uniforms.config.value.w = props.scale
 	}
 })