移植了建筑物打光的效果，并兼容了最新的 three r157 版本

.eslintrc.js

@@ -8,4 +8,29 @@ module.exports = {
     env: {
         jest: true,
     },
+    //add by hawk
+    // settings: {
+    //     'import/resolver': {
+    //         alias: {
+    //             map: [
+    //                 // 这里参照别名配置映射
+    //                 ['@', './src'],
+    //                 ['PLS', './src/plugins'],
+    //             ],
+    //         },
+    //     },
+    // },
+    rules: {
+        'prettier/prettier': 'off',
+        "vue/space-unary-ops": "off",
+        "vue/comma-dangle": "off",
+        "no-debugger": "off"
+        // "space-unary-ops": "off",
+        // 'import/no-unresolved': [
+        //     2,
+        //     {
+        //         ignore: ['^@/', 'PLS'], // 设置的路径别名
+        //     },
+        // ],
+    },
 };

.fes.js

@@ -4,7 +4,7 @@
  * @Autor: Hawk
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: Hawk
- * @LastEditTime: 2023-10-17 09:31:40
+ * @LastEditTime: 2023-10-17 09:42:22
  */
 // import { resolve } from 'path';
 import { join } from 'path';
@@ -38,7 +38,7 @@ export default defineBuildConfig({
             ['1', '有效的'],
         ],
     },
-    // hawk add
+    //add by hawk
     viteVuePlugin: {
         ...templateCompilerOptions,
     },

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"editor.tabSize": 2
+}

src/pages/index.vue

@@ -1,9 +1,19 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: Hawk
+ * @Date: 2023-10-16 10:53:09
+ * @LastEditors: Hawk
+ * @LastEditTime: 2023-10-17 10:06:36
+-->
 <template>
-    <div style="padding: 32px">hello world</div>
+    <city />
 </template>
 
 <script setup>
 import { defineRouteMeta } from '@fesjs/fes';
+// eslint-disable-next-line import/no-unresolved
+import city from 'PLS/superzay/pages/city.vue'; //'@/plugins/'
 
 defineRouteMeta({
     name: 'index',

src/plugins/superzay/components/belt.vue

@@ -0,0 +1,126 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: Hawk
+ * @Date: 2023-10-17 09:35:18
+ * @LastEditors: Hawk
+ * @LastEditTime: 2023-10-17 15:16:25
+-->
+<script setup>
+import { useRenderLoop } from '@tresjs/core'
+import { useFBX } from '@tresjs/cientos';
+import * as THREE from 'three'
+
+const path = './plugins/superzay/belt/model/shanghai.FBX';
+const model = await useFBX(path);
+
+const timeDelta = { value: 0 }
+const setColorMaterial = () => {
+	model.traverse((child) => {
+		// 设置城市建筑（mesh物体），材质基本颜色
+		if (child.name === 'CITY_UNTRIANGULATED') {
+			const materials = Array.isArray(child.material) ? child.material : [child.material]
+			materials.forEach((material) => {
+				material.opacity = 0.8;
+				material.transparent = true;
+				material.color.setStyle("#EC5BFF");
+			})
+		}
+		// 设置城市地面（mesh物体），材质基本颜色
+		if (child.name === 'LANDMASS') {
+			const materials = Array.isArray(child.material) ? child.material : [child.material]
+			materials.forEach((material) => {
+				material.opacity = 0.8;
+				// material.transparent = true;
+				material.color.setStyle("#040912");
+			})
+		}
+	})
+}
+const setEffectMaterial = () => {
+	let cityBuildings = null// 城市建筑群
+	model.traverse((child) => {
+		if (child.name !== 'CITY_UNTRIANGULATED') return
+		cityBuildings = child
+	})
+	const { geometry } = cityBuildings;
+	geometry.computeBoundingBox()
+	geometry.computeBoundingSphere()
+	const { max, min } = geometry.boundingBox;
+	const materials = Array.isArray(cityBuildings.material) ? cityBuildings.material : [cityBuildings.material]
+	materials.forEach((material) => {
+		material.onBeforeCompile = (shader) => {
+			shader.uniforms.uMax = {
+				value: max
+			}
+			shader.uniforms.uMin = {
+				value: min
+			}
+			shader.uniforms.uLightColor = {
+				value: new THREE.Color('#ffffff')
+			}
+			shader.uniforms.uBorderWidth = {
+				value: 5
+			}
+			shader.uniforms.uCircleTime = {
+				value: 5
+			}
+			shader.uniforms.uTime = timeDelta
+			//timeDelta
+			const vertex = `
+	varying vec4 vPosition;
+	void main() {
+		 vPosition = modelMatrix * vec4(position,1.0);
+`
+			shader.vertexShader = shader.vertexShader.replace("void main() {", vertex);
+			// 补充颜色渐变动画需要的各种变量
+			const fragment = `
+	uniform mat4 modelMatrix;
+  varying vec4 vPosition;
+	uniform vec3 uMax; 
+	uniform vec3 uMin; 
+	uniform float uBorderWidth; 
+	uniform vec3 uLightColor;
+	uniform float uCircleTime; 
+	uniform float uTime; 
+	vec4 uMax_world;
+	vec4 uMin_world;
+
+	void main() {
+		// 转世界坐标
+		uMax_world =  modelMatrix * vec4(uMax,1.0);
+		uMin_world =  modelMatrix * vec4(uMin,1.0);
+`;
+			const fragmentColor = `
+#include <dithering_fragment>
+	vec3 distColor = outgoingLight;
+	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) {
+		gl_FragColor = vec4(uLightColor, diffuseColor.a);
+	} else {
+		gl_FragColor = vec4(distColor, diffuseColor.a);
+	}
+`;
+			shader.fragmentShader = shader.fragmentShader.replace("void main() {", fragment)
+			shader.fragmentShader = shader.fragmentShader.replace("#include <tonemapping_fragment>", fragmentColor);
+		}
+	})
+}
+setColorMaterial()
+setEffectMaterial()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+	timeDelta.value += delta;
+})
+</script>
+
+<template>
+	<Suspense>
+		<primitive :object="model" />
+	</Suspense>
+</template>

src/plugins/superzay/pages/city.vue

@@ -0,0 +1,49 @@
+<!-- eslint-disable vue/space-unary-ops -->
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: Hawk
+ * @Date: 2023-10-17 08:30:49
+ * @LastEditors: Hawk
+ * @LastEditTime: 2023-10-17 14:54:11
+-->
+<template>
+	<TresCanvas v-bind="state">
+		<TresPerspectiveCamera :position="[600, 750, -1221]" :fov="45" :near="1" :far="10000" />
+		<OrbitControls v-bind="controlsState" />
+		<TresAmbientLight color="#adadad" />
+		<TresDirectionalLight :position="[100, 100, 0]" :intensity="0.5" color="#ffffff" cast-shadow />
+
+		<Suspense>
+			<belt></belt>
+		</Suspense>
+
+		<TresGridHelper />
+	</TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three';
+import { reactive, onMounted, watchEffect } from 'vue';
+import { TresCanvas } from '@tresjs/core';
+import { OrbitControls } from '@tresjs/cientos';
+
+import belt from '../components/belt.vue';
+
+const state = reactive({
+	clearColor: '#32373E',
+	shadows: true,
+	alpha: false,
+	useLegacyLights: true,
+	shadowMapType: BasicShadowMap,
+	outputColorSpace: SRGBColorSpace,
+	toneMapping: NoToneMapping,
+});
+
+const controlsState = reactive({ autoRotate: true, enableDamping: true });
+
+watchEffect(() => { });
+onMounted(() => {
+
+})
+</script>