新版本地图尝试

src/views/App3DMap.vue

@@ -0,0 +1,58 @@
+<script>
+const KENGEE_CDN_BASE = "http://10.0.97.209/presource/datascreen/js/threejs"
+const importMapScript = document.createElement('script');
+importMapScript.type = 'importmap';
+importMapScript.textContent = JSON.stringify({
+  imports: {
+    three: `${KENGEE_CDN_BASE}/three.module.js`,
+    OrbitControls: `${KENGEE_CDN_BASE}/jsm/controls/OrbitControls.js`,
+    'three/jsm/renderers/CSS3DRenderer': `${KENGEE_CDN_BASE}/jsm/renderers/CSS3DRenderer.js`,
+  }
+});
+document.head.appendChild(importMapScript);
+const THREE = await import('three')
+const {OrbitControls} = await import('OrbitControls')
+const CSS3DRenderer = await import('three/jsm/renderers/CSS3DRenderer')
+export default {
+  name: "App3DMap",
+  label: "vue3DModel地图",
+  data() {
+    return {
+      scene: null,
+      camera: null,
+      renderer: null
+    }
+  },
+  methods: {
+    animate() {
+      requestAnimationFrame(this.animate);
+      // 更新控制器
+      this.controls.update();
+      // 渲染场景
+      this.renderer.render(this.scene, this.camera);
+    }
+  },
+  mounted() {
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    this.camera.position.set(0, 0, 40);
+    this.camera.lookAt(new THREE.Vector3(0, 0, 0));
+    // this.renderer = new CSS3DRenderer();
+    this.scene.add(this.camera)
+
+    this.renderer = new THREE.WebGLRenderer({antialias: true});
+    this.renderer.setSize(this.$el.offsetWidth, this.$el.offsetHeight);
+    this.$el.appendChild(this.renderer.domElement);
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.animate();
+  }
+}
+</script>
+
+<template>
+  <section class="App3DMap"/>
+</template>
+
+<style scoped>
+
+</style>

src/views/AppThreeMap.vue

@@ -16,7 +16,9 @@ export default {
       const {$waitFor, THREE, $loadScript} = window
       return $waitFor(THREE).then(() => Promise.all([
         `http://10.0.97.209/presource/datascreen/js/three/js/controls/OrbitControls.js`,
-        // `http://10.0.97.209/presource/datascreen/js/renderers/CSS3DRenderer.js`,
+        `http://10.0.97.209/presource/datascreen/js/three/js/renderers/CSS3DRenderer.js`,
+        `http://10.0.97.209/presource/datascreen/js/three/js/renderers/CSS2DRenderer.js`,
+        `http://10.0.97.209/presource/datascreen/js/three/js/objects/Reflector.js`,
       ].map(e => $loadScript('js', e))))
     },
     initMap() {
@@ -34,10 +36,8 @@ export default {
           this.renderer = null; // 渲染器
           this.controls = null; // 控制器
           this.mapGroup = []; // 组
-          this.meshList = []; // 接受鼠标事件对象
           this.selectedObject = null; // 当前选中对象
           this.loopIndex = 0; // 循环标记
-          this.cameraPath = null; // 相机运动轨迹
           this.mouse = new THREE.Vector2();
         }
 
@@ -47,7 +47,6 @@ export default {
         init() {
           this.setScene();
           this.setCamera();
-          // this.setLight();
           // this.setAxes();
           this.setRenderer();
           this.setControl();
@@ -61,11 +60,8 @@ export default {
         /**
          * @desc 动画循环
          * */
-
         animat() {
           requestAnimationFrame(this.animat.bind(this));
-          this.lightWave();
-          // this.moveCamera();
           TWEEN.update();
           this.controls.update();
           this.renderer.render(this.scene, this.camera);
@@ -74,7 +70,6 @@ export default {
         /**
          * @desc 获取地图
          * */
-
         getMap(url) {
           const that = this;
           axios.get(url).then(function (res) {
@@ -86,20 +81,6 @@ export default {
           })
         }
 
-        /**
-         * @desc 添加基础灯光
-         * */
-
-        setLight() {
-          const pointLight = new THREE.PointLight(0xffffff, 1, 0);
-          pointLight.position.set(0, 0, 5);
-          this.scene.add(pointLight);
-
-          const sphereSize = 1;
-          const pointLightHelper = new THREE.PointLightHelper(pointLight, sphereSize);
-          this.scene.add(pointLightHelper);
-        }
-
         /**
          * @desc 绘制地图
          * @params geojson
@@ -217,7 +198,6 @@ export default {
             side: THREE.DoubleSide,
             blending: THREE.AdditiveBlending,
             color: bakeStockAmt > 0 ? "#66FFFF" : "#FFD15C",
-            // color:  "#66FFFF",
             depthTest: false,
             transparent: true,
             opacity: 1
@@ -228,6 +208,7 @@ export default {
           // marker.scale.set(scale, scale, 1)
           marker.data = item
           marker.position.set(v3.x * scale, v3.y * scale, 0.201 * scale)
+          console.log(marker)
           return marker
         }
 
@@ -240,32 +221,6 @@ export default {
           })
         }
 
-        /**
-         * @desc 移动相机
-         * */
-        moveCamera() {
-          // 第一次绘制相机路径
-          if (this.cameraPath === null) {
-            this.cameraPath = new THREE.Path();
-            this.cameraPath.moveTo(150, 0);
-            this.cameraPath.lineTo(70, 0);
-            let geometry = new THREE.BufferGeometry().setFromPoints(this.cameraPath.getPoints());
-            let material = new THREE.LineBasicMaterial({color: 0xff0000});
-            let line = new THREE.Line(geometry, material);
-            line.position.z = 100;
-            this.scene.add(line);
-            this.progress = 0;
-          } else {
-            if (this.progress < 1) {
-              this.progress += 0.01; // 增量 也就是说将该线端，按照1/500的比例进行分割。也就是说有500个坐标点
-              let point = this.cameraPath.getPointAt(this.progress); // 从路径中拿取坐标点点
-              if (point) {
-                this.camera.position.set(point.x, point.y, 100);
-              }
-            }
-          }
-        }
-
         /**
          * @desc 坐标转换
          * @param lnglat [x,y]
@@ -322,8 +277,8 @@ export default {
          * @desc 创建控制器
          * */
         setControl() {
-          this.controls = new THREE.OrbitControls(this.camera,rootEl);
+          this.controls = new THREE.OrbitControls(this.camera, rootEl);
-          this.controls.enableRotate = false
+          // this.controls.enableRotate = false
           this.camera.position.set(this.cameraPosition.x, this.cameraPosition.y, this.cameraPosition.z);
         }
 
@@ -338,7 +293,6 @@ export default {
         /**
          * @desc 鼠标 hover 事件
          * */
-
         bindMouseEvent() {
           const that = this, _this = this;
           const raycaster = new THREE.Raycaster();
@@ -439,12 +393,26 @@ export default {
           this.scene.add(ground);
           ground.receiveShadow = true;
           ground.castShadow = true;
+          const div = document.createElement("div");
+          div.style.color = "#fff";
+          div.style.width = "40px";
+          div.style.height = "25px";
+          div.style.borderWidth = "1px";
+          div.style.borderStyle = "solid";
+          div.style.borderColor = "#00ffc4";
+          div.style.borderRadius = "5px";
+          div.style.fontSize = "14px";
+          div.style.fontWeight = 600;
+          div.style.textShadow = "1px 1px 6px #fff";
+          div.style.textAlign = "center";
+          div.style.lineHeight = "25px";
+          div.textContent = `我操你大爷`;
+          const tip = new THREE.CSS2DObject(div);
+          tip.scale.set(0.01, 0.01, 0.01);
+          tip.position.set(0, 0, 1);
+          this.scene.add(tip);
         }
 
-        /**
-         * @desc 地区名称 采用sprite
-         * */
-
         tipsSprite(areaData) {
           let canvas = document.createElement("canvas");
           canvas.width = 500;
@@ -472,39 +440,6 @@ export default {
 
           return textSprite
         }
-
-        /**
-         * @desc 光柱波纹动画
-         * */
-
-        lightWave() {
-          if (this.mapGroup.children) {
-            let that = this;
-            if (this.loopIndex >= 1) {
-              this.loopIndex = 0;
-            } else {
-              this.loopIndex += 0.02;
-            }
-            this.mapGroup.children.forEach(function (item) {
-              if (item.name === 'area') {
-                item.children.forEach(function (g) {
-                  if (g.name === 'lightTipGroup') {
-                    g.children.forEach(function (c) {
-                      if (c.name === 'circleMesh') {
-                        c.scale = {
-                          x: 4 * Math.asin(that.loopIndex) + 1,
-                          y: 4 * Math.asin(that.loopIndex) + 1,
-                          z: 4 * Math.asin(that.loopIndex) + 1
-                        };
-                        c.material.opacity = 0.3 * Math.acos(that.loopIndex) - 0.1
-                      }
-                    })
-                  }
-                })
-              }
-            })
-          }
-        }
       }
 
       return new GeoMap()
@@ -541,3 +476,9 @@ export default {
 <template>
   <section class="AppThreeMap"/>
 </template>
+<style>
+.AppThreeMap {
+  width: 100%;
+  height: 100%;
+}
+</style>