threejs升级了

src/utils/inject.js

@@ -8,7 +8,7 @@ const libs = [
   `${KENGEE_CDN_BASE}/js/pinyin.min.js`,
   `${KENGEE_CDN_BASE}/js/dayjs.min.js`,
   `${KENGEE_CDN_BASE}/js/Tween.js`,
-  `${KENGEE_CDN_BASE}/js/three/three.js`,
+  `${KENGEE_CDN_BASE}/js/three/three.min.js`,
   `${KENGEE_CDN_BASE}/js/d3-array.min.js`,
   `${KENGEE_CDN_BASE}/js/d3-geo.min.js`,
 ]

src/views/App3DMap.vue

@@ -1,58 +0,0 @@
-<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

@@ -17,8 +17,8 @@ export default {
       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/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/loaders/FontLoader.js`,
-        `http://10.0.97.209/presource/datascreen/js/three/js/objects/Reflector.js`,
+        `http://10.0.97.209/presource/datascreen/js/three/js/geometries/TextGeometry.js`,
       ].map(e => $loadScript('js', e))))
     },
     initMap() {
@@ -47,7 +47,7 @@ export default {
         init() {
           this.setScene();
           this.setCamera();
-          // this.setAxes();
+          this.setAxes();
           this.setRenderer();
           this.setControl();
           this.makeGround();
@@ -158,9 +158,7 @@ export default {
             color: '#002240',
             wireframe: false
           });
-          const lineMaterial = new THREE.LineBasicMaterial({
+          const lineMaterial = new THREE.LineBasicMaterial({color: '#97CAE6'});
-            color: '#97CAE6'
-          });
           const areas = []
           data.forEach(function (areaData) {
             let areaGroup = new THREE.Group();
@@ -170,8 +168,7 @@ export default {
               // let mesh = new THREE.Mesh(geometry, [blockMaterial, blockSideMaterial]);
               // areaGroup.add(mesh);
               // Draw Line
-              let lineGeometry = new THREE.Geometry();
+              let lineGeometry = new THREE.BufferGeometry().setFromPoints(areaItem);
-              lineGeometry.vertices = areaItem;
               let lineMesh = new THREE.Line(lineGeometry, lineMaterial);
               lineMesh.position.z = 0.201;
               areaGroup.add(lineMesh);
@@ -380,11 +377,7 @@ export default {
         }
 
         makeGround() {
-          let material = new THREE.MeshBasicMaterial({
+          const material = new THREE.MeshBasicMaterial({opacity: 0.5, transparent: true, color: '#07193D'});
-            opacity: 1,
-            transparent: true,
-            color: '#07193D'
-          });
           const geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
           let ground = new THREE.Mesh(geometry, material);
           ground.position.x = 0;
@@ -393,24 +386,51 @@ export default {
           this.scene.add(ground);
           ground.receiveShadow = true;
           ground.castShadow = true;
-          const div = document.createElement("div");
+          const loader = new THREE.FontLoader();
-          div.style.color = "#fff";
+          loader.load('/presource/datascreen/js/three/fonts/PingFang SC_Regular.json', (font) => {
-          div.style.width = "40px";
+            const textGeometry = new THREE.TextGeometry('郑州市', {
-          div.style.height = "25px";
+              font: font,
-          div.style.borderWidth = "1px";
+              size: 1,
-          div.style.borderStyle = "solid";
+              height: 0.2,
-          div.style.borderColor = "#00ffc4";
+              curveSegments: 12,
-          div.style.borderRadius = "5px";
+              bevelEnabled: true,
-          div.style.fontSize = "14px";
+              bevelThickness: 0.01,
-          div.style.fontWeight = 600;
+              bevelSize: 0.02,
-          div.style.textShadow = "1px 1px 6px #fff";
+              bevelOffset: 0,
-          div.style.textAlign = "center";
+              bevelSegments: 5
-          div.style.lineHeight = "25px";
+            });
-          div.textContent = `我操你大爷`;
+            textGeometry.translate(1, 2, -3.2)
-          const tip = new THREE.CSS2DObject(div);
+            textGeometry.rotateX(Math.PI / 3)
-          tip.scale.set(0.01, 0.01, 0.01);
+            textGeometry.rotateZ(Math.PI / 2)
-          tip.position.set(0, 0, 1);
+            textGeometry.computeTangents()
-          this.scene.add(tip);
+            const textMaterial = new THREE.MeshPhongMaterial({color: '#fff'});
+            const text = new THREE.Mesh(textGeometry, textMaterial);
+            this.scene.add(text);
+            const planeGeometry = new THREE.PlaneGeometry(textGeometry.boundingBox.max.x, textGeometry.boundingBox.max.y);
+            const planeMaterial = new THREE.MeshBasicMaterial({color: '#07193D', side: THREE.DoubleSide});
+            const plane = new THREE.Mesh(planeGeometry, planeMaterial);
+            plane.position.copy(text.position).add(new THREE.Vector3(0, -textGeometry.boundingBox.max.y, 0));
+            plane.position.set(0, 0, 0);
+            this.scene.add(plane);
+          })
+          // 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.CSS3DObject(div);
+          // tip.scale.set(0.01, 0.01, 0.01);
+          // tip.position.set(0, 0, 1);
+          // this.scene.add(tip);
         }
 
         tipsSprite(areaData) {

vite.config.js

@@ -40,16 +40,12 @@ export default defineConfig({
     }
   },
   server: {
-    port: 9000,
+    port: 80,
     proxy: {
       '/data-boot': {
         target: 'http://10.0.97.209',
         changeOrigin: true,
       },
-      '/presource': {
-        target: 'http://10.0.97.209',
-        changeOrigin: true,
-      }
     }
   }
 })