全部完成

src/views/AppNavbar.vue

@@ -32,7 +32,7 @@ export default {
 
 <template>
   <section class="AppNavbar" :style="{backgroundImage}">
-    <div v-for="e in screens" :key="e.id" @click="groupId=e.id" class="pointer"/>
+    <div v-for="e in screens" :key="e.id" @click="$marketBoard.screenId=e.id" class="pointer"/>
   </section>
 </template>
 

src/views/AppThreeMap.vue

@@ -57,6 +57,7 @@ export default {
           this.setRenderer();
           this.setControl();
           this.setMapData(root.geoJson)
+          this.setHoverPanel()
           this.animation();
           this.bindMouseEvent()
         }
@@ -68,11 +69,13 @@ export default {
           requestAnimationFrame(this.animation.bind(this));
           this.loop = (this.loop * 100 + 2) % 100 * 0.01
           this.markers.children.forEach(e => {
+            if (e.data.bakeStockAmt <= 0) {
               e.scale = {
                 x: Math.asin(this.loop) + 1,
                 y: Math.asin(this.loop) + 1,
                 z: Math.asin(this.loop) + 1
               };
+            }
           })
           TWEEN.update();
           this.controls.update();
@@ -244,6 +247,9 @@ export default {
           rootEl.appendChild(this.renderer.domElement);
           this.CSS3DRenderer = new THREE.CSS3DRenderer();
           this.CSS3DRenderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
+          this.CSS3DRenderer.domElement.style.position = 'absolute';
+          this.CSS3DRenderer.domElement.style.top = '0';
+          this.CSS3DRenderer.domElement.style.left = '0';
           rootEl.appendChild(this.CSS3DRenderer.domElement);
 
           function onWindowResize() {
@@ -288,6 +294,25 @@ export default {
           this.tips.add(textMesh)
         }
 
+        setHoverPanel() {
+          this.hoverPanelElement = document.createElement('div')
+          Object.entries({
+            background: 'linear-gradient( 90deg, rgba(9,63,107,0.79) 0%, rgba(13,58,99,0.03) 100%)',
+            borderRadius: '2px',
+            color: '#fff',
+            fontSize: '10px',
+            lineHeight: '14px',
+            position: 'absolute',
+            top: 0,
+            padding: '8px',
+            opacity: 0,
+          }).forEach(([key, value]) => {
+            this.hoverPanelElement.style[key] = value
+          })
+          this.hoverPanel = new THREE.CSS3DObject(this.hoverPanelElement)
+          this.scene.add(this.hoverPanel)
+        }
+
         bindMouseEvent() {
           const raycaster = new THREE.Raycaster();
 
@@ -302,6 +327,9 @@ export default {
                 this.showHoverPanel(e.object)
               }
             })
+            if (intersects?.length <= 0) {
+              this.hoverPanelElement.style.opacity = '0'
+            }
           }
           const onClick = () => {
             // const {x, y} = this.mouse
@@ -325,24 +353,12 @@ export default {
         }
 
         showHoverPanel({data: marker, position} = {}) {
-          const hoverPanelElement = document.createElement('div')
-          Object.entries({
-            background: 'linear-gradient( 90deg, rgba(9,63,107,0.79) 0%, rgba(13,58,99,0.03) 100%)',
-            borderRadius: '2px',
-            color: '#fff',
-            fontSize: '10px',
-            lineHeight: '14px',
-            position: 'absolute',
-            top: 0,
-          }).forEach(([key, value]) => {
-            hoverPanelElement.style[key] = value
-          })
-          const span = document.createElement('span')
-          span.innerHTML = [marker.storeName, `现烤库存金额：${marker.bakeStockAmt}`, `现烤销售机会：${marker.bakeStockAmt}`].join('<br/>')
-          hoverPanelElement.appendChild(span)
-          const hoverPanel = new THREE.CSS3DObject(hoverPanelElement)
-          hoverPanel.position.set(position)
-          this.scene.add(hoverPanel)
+          this.hoverPanelElement.style.opacity = '1'
+          this.hoverPanelElement.innerHTML = [marker.storeName, `现烤库存金额：${marker.bakeStockAmt}`, `现烤销售机会：${marker.bakeStockAmt}`].join('<br/>')
+          this.hoverPanel.scale.set(...Array(3).fill(0.04))
+          this.hoverPanel.rotation.z = Math.PI / 2
+          this.hoverPanel.rotation.y = Math.PI / 6
+          this.hoverPanel.position.set(position.x * scale, position.y * scale, position.z * scale)
         }
       }