f

src/views/prometheusMonitor/earth.vue

@@ -121,7 +121,7 @@ export default {
       // this.orbitControls.minAzimuthAngle = 0
       // this.orbitControls.maxAzimuthAngle = 0
       this.orbitControls.minZoom = 1
-      this.orbitControls.maxZoom = 1.5
+      this.orbitControls.maxZoom = 2
     },
     initModel() {
       var geometry = new Three.SphereGeometry(100, 40, 40) // 创建一个球体几何对象
@@ -251,6 +251,7 @@ export default {
       })
       this.scene.add(map1)
     },
+    // geojson转化
     transformToLatLon(a, b) {
       var d = b.jsonmarginX
       var f = b.jsonmarginY
@@ -277,19 +278,6 @@ export default {
         x: b.x
       }
     },
-    // getPosition(_longitude, _latitude, _radius) {
-    //   var lg = Three.Math.degToRad(_longitude)
-    //   var lt = Three.Math.degToRad(_latitude)
-    //   var temp = _radius * Math.cos(lt)
-    //   var x = temp * Math.sin(lg)
-    //   var y = _radius * Math.sin(lt)
-    //   var z = temp * Math.cos(lg)
-    //   return {
-    //     x: x,
-    //     y: y,
-    //     z: z
-    //   }
-    // },
     init() {
       this.initRender()
       this.initScene()
@@ -300,44 +288,33 @@ export default {
 
       this.initMap()
 
-      this.raycaster = new Three.Raycaster()
-
-      // 计算物体和射线的焦点
-      var intersects = this.raycaster.intersectObjects(this.scene.children)
-
-      for (var i = 0; i < intersects.length; i++) {
-        intersects[ i ].object.material.color.set(0xff0000)
-      }
       document.addEventListener('mousedown', this.onDocumentMouseDown, false)
     },
-    onDocumentMouseDown(event) {
-      // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
-      console.log('fk')
-      // event.preventDefault()
-      const mouseX = (event.clientX / window.innerWidth) * 2 - 1
-      const mouseY = -(event.clientY / window.innerHeight) * 2 + 1
+    onDocumentMouseDown(e) {
+      e.preventDefault()
+      var raycaster = new Three.Raycaster()
 
-      this.raycaster.setFromCamera(new Three.Vector2(mouseX, mouseY), this.camera)
-      console.log(this.raycaster)
-      // var intersects = this.raycaster.intersectObjects([])
-      // if (intersects.length > 0) {
-      //   if (this.intersected) this.intersected.material.map = this.intersected.currentMap
-      //   this.intersected = intersects[0].object
-      //   this.intersected.currentMap = this.intersected.material.map
-      //   // this.intersected.material.map = (128, '#cccccc', 'cccccc')
-      // }
+      var mouse = new Three.Vector2() // 将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
+      mouse.x = (e.clientX / window.innerWidth) * 2 - 1
+      mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
+      // 新建一个三维单位向量 假设z方向就是0.5
+      // 根据照相机，把这个向量转换到视点坐标系
+      // var vector = new Three.Vector3(mouse.x, mouse.y, 0.5).unproject(this.camera)
+      raycaster.setFromCamera(mouse, this.camera)
+      // 在视点坐标系中形成射线,射线的起点向量是照相机， 射线的方向向量是照相机到点击的点，这个向量应该归一标准化。
+      // var raycaster = new Three.Raycaster(this.camera.position, vector.sub(this.camera.position).normalize())
+
+      // 射线和模型求交，选中一系列直线
+      // console.log(this.scene)
+      var intersects = raycaster.intersectObjects(this.scene.children)
+      console.log(intersects)
+      if (intersects.length > 0) {
+        // 选中第一个射线相交的物体
+        console.log(intersects[0].object)
+      }
     },
     // 返回一个卫星和轨道的组合体
     setSatellites(rotation, speed) {
-      // var track = new Three.Mesh(new Three.RingGeometry(satelliteRadius, satelliteRadius + 0.05, 50, 1))
-      // var centerMesh = new Three.Mesh(new Three.SphereGeometry(1, 1, 1), new Three.MeshLambertMaterial())
-      // satellite.scale.x = satellite.scale.y = satellite.scale.z = satelliteSize
-      // satellite.position.set(satelliteRadius, 0, 0)
-      // var pivotPoint = new Three.Object3D()
-      // pivotPoint.add(satellite)
-      // pivotPoint.add(track)
-      // centerMesh.add(pivotPoint)
-      // centerMesh.rotation.set(rotation.x, rotation.y, rotation.z)
       const distance = 130
       const satellite = new Three.Sprite(new Three.SpriteMaterial({ map: new Three.CanvasTexture(this.generateSprite()) }))
       satellite.scale.x = satellite.scale.y = satellite.scale.z = 3