master: Fixed 临时提交

src/layout/ThreeMap/createMap.js

@@ -20,7 +20,7 @@ const createMap = (data, scene) => {
         ${233},
         ${Math.random() * 30 + 55}%,
         ${Math.random() * 30 + 55}%)`).getHex()
-    const depth = 6
+    const depth = 2
 
     createLabel(name, point, depth, map)
     createIcon(point, depth, map)

src/layout/ThreeMap/system/createLoop.js

@@ -1,4 +1,4 @@
-import { Vector2, Raycaster } from 'three'
+import { Vector2, Raycaster, Clock } from 'three'
 import isAlpha from '../utils/isAlpha'
 import { Easing, Tween } from '@tweenjs/tween.js'
 import { getGeoJson } from '../utils/apis.js'
@@ -8,8 +8,12 @@ import { useOutsideHomeStore } from '@/stores/modules/home'
 import { $mitt } from '@/utils'
 import { router } from '@/router'
 
+let spriteArr = null
+
 function createLoop(scene, camera, renderer, controls, labelRenderer, mapGroup, mapRef) {
   const useHomeStore = useOutsideHomeStore()
+  console.log(mapGroup.children[0])
+  spriteArr = mapGroup.children[0].children.filter((item) => item.type === 'Sprite')
 
   // 创建动画进场3d 视角转化特效
   const tween = new Tween({ x: 0, y: 0, z: 100 }) // 起始位置
@@ -17,17 +21,35 @@ function createLoop(scene, camera, renderer, controls, labelRenderer, mapGroup,
     .easing(Easing.Quadratic.Out) // 过度动画
     .onUpdate((object) => {
       // 改变摄像机位置
-      camera.position.x = object.x
-      camera.position.y = object.y
-      camera.position.z = object.z
+      camera.position.set(object.x, object.y, object.z)
     })
     .start()
+  const tween2 = new Tween(camera.position)
+    .to({ x: camera.position.x, y: camera.position.y - 50, z: camera.position.z - 50 }, 1000)
+    .easing(Easing.Quadratic.Out)
+    .onUpdate((object) => {
+      camera.position.set(object.x, object.y, object.z)
+    })
+
+  function updateSprites(camera, sprites) {
+    const cameraPosition = camera.position
+    sprites.forEach((sprite) => {
+      const distance = cameraPosition.distanceTo(sprite.position)
+      // 根据距离调整 scale，这里假设一个简单的比例关系
+      const scaleFactor = 1 / distance
+      sprite.scale.set(scaleFactor, scaleFactor, 1)
+    })
+  }
+
+  const clock = new Clock()
   const animate = () => {
-    //   map.rotation.y += 0.01
-    renderer.setAnimationLoop(animate)
+    const elapsedTime = clock.getElapsedTime()
+    tween.update() // Convert to milliseconds
+    tween2.update() // Convert to milliseconds
+    updateSprites(camera, spriteArr)
     controls.update()
-    tween.update()
     renderer.render(scene, camera)
+    renderer.setAnimationLoop(animate)
     labelRenderer.render(scene, camera)
   }
 
@@ -74,21 +96,25 @@ function createLoop(scene, camera, renderer, controls, labelRenderer, mapGroup,
   const reRender = (adcode) => {
     //  清除三维地图组 下钻
     getGeoJson(adcode).then((geojson) => {
-      console.log(geojson)
-      console.log(mapGroup)
+      // console.log(geojson)
+      // console.log(mapGroup)
       mapGroup.remove(...mapGroup.children)
       mapRef.removeChild(labelRenderer.domElement)
       const map = createMap(geojson, mapGroup)
       labelRenderer = createLabelRenderer(mapRef)
       mapGroup.add(map)
+      console.log(camera.position)
+      tween2.start()
+      // camera.position.set(0, mapGroup.position.y + 6, mapGroup.position.z + 6)
+
       controls.update()
-      tween.update()
       renderer.render(scene, camera)
       labelRenderer.render(scene, camera)
     })
   }
 
   $mitt.on('onPreLevel', (item) => {
+    if (useHomeStore.codes.length === 1) return
     useHomeStore.codes = useHomeStore.codes.slice(
       0,
       useHomeStore.codes.findIndex((code) => code.code === item.code) + 1
@@ -99,7 +125,6 @@ function createLoop(scene, camera, renderer, controls, labelRenderer, mapGroup,
   window.addEventListener('dblclick', (event) => {
     const intersect = getIntersect(event.clientX, event.clientY)
     if (intersect) {
-      console.log(intersect)
       const { level, adcode, name } = intersect.properties
       if (level === 'district') {
         return

src/layout/ThreeMap/system/createRenderer.js

@@ -4,6 +4,7 @@ import { createMap } from '../createMap.js'
 function createRenderer(mapRef, mapGroup, data) {
   const renderer = new WebGLRenderer({ alpha: true, antialias: true })
   renderer.setSize(window.innerWidth, window.innerHeight)
+  renderer.setPixelRatio(window.devicePixelRatio)
   renderer.domElement.className = 'map-canvas'
   mapRef.appendChild(renderer.domElement)
   const map = createMap(data, mapGroup)

src/layout/ThreeMap/system/createScene.js

@@ -6,7 +6,7 @@ function createScene() {
 
   // const axesHelper = new AxesHelper(5)
   // scene.add(axesHelper)
-  const ambientLight = new AmbientLight(0xd4e7fd, 4)
+  const ambientLight = new AmbientLight(0xd4e7fd, 0.2)
   scene.add(ambientLight)
 
   const directionalLight = new DirectionalLight(0xe8eaeb, 0.2)

src/stores/modules/home.js

@@ -16,11 +16,11 @@ export const useHomeStore = defineStore('home', () => {
     codes.value.splice(0, codes.value.length)
   }
 
+  const middleBottomBoxShow = ref(true)
+
   watch(
     codes,
     (newV) => {
-      console.log(newV)
-
       if (newV.length === 1) {
         isNull.value = false
       }
@@ -28,7 +28,7 @@ export const useHomeStore = defineStore('home', () => {
     { deep: true }
   )
 
-  return { codes, isNull, setCode, clear }
+  return { codes, isNull, setCode, clear, middleBottomBoxShow }
 })
 
 export function useOutsideHomeStore() {

src/views/home/home.vue

@@ -30,7 +30,7 @@
           <div
             class="absolute top-0 right--40px cursor-pointer w-40px h-25px"
             v-else
-            @click="$router.go(-1)"
+            @click="toMap"
           >
             <svg
               t="1731580007592"
@@ -97,7 +97,9 @@
 
   import { $mitt, getStaticResource } from '@/utils'
   import { useOutsideHomeStore } from '@/stores/modules/home'
+
   const useHomeStore = useOutsideHomeStore()
+  const router = useRouter()
 
   const route = useRoute()
   const isMap = computed(() => route.name === 'Map')
@@ -126,4 +128,9 @@
   const toolClick = (item) => {
     item.selected = !item.selected
   }
+
+  const toMap = () => {
+    router.go(-1)
+    $mitt.emit('onPreLevel', useHomeStore.codes[0])
+  }
 </script>