From 8e02cc1e7e4f3312468095467bdf545cf90dbbed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Tue, 15 Oct 2024 14:58:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/static/img/model/label1.png     | Bin 0 -> 429 bytes
 .../resources/static/img/model/label2.png     | Bin 0 -> 3511 bytes
 .../examples/jsm/renderers/CSS2DRenderer.js   |   2 +-
 .../templates/manage/model/model.html         | 243 ++++++++++++------
 4 files changed, 161 insertions(+), 84 deletions(-)
 create mode 100644 ruoyi-admin/src/main/resources/static/img/model/label1.png
 create mode 100644 ruoyi-admin/src/main/resources/static/img/model/label2.png

diff --git a/ruoyi-admin/src/main/resources/static/img/model/label1.png b/ruoyi-admin/src/main/resources/static/img/model/label1.png
new file mode 100644
index 0000000000000000000000000000000000000000..afd01856683afc4bbbd82e7b82024dd02ba3ef71
GIT binary patch
literal 429
zcmeAS@N?(olHy`uVBq!ia0vp^UO+6*!3HE9CP$kBDb50q$YKTtZeb8+WSBKaf`NfC
z-qXb~B%|@|&Hdg?g%Za<_TNpExH=(jb}Q>wQ;|E`&4&(Nv|sT5$Vcm|_ZB6uuHF93
zBI+0W6Co*Xzw-w?T0GV(zHMi-4L;9$KKo0g-JYF~*^(`|V>{w+GA!tMc26)fZfTe0
zJHh|0ElQIDT!gwjoCG~JlsH{g7IvtJOe7$9bkT?Msh9USefsw6c=UpAf+_s}DlY0o
zOU6Etc@VnFZ^Pd5eI@sOj?9<ee>YAn{KDN^vJ4hsZrdxx_9fSUopN#Rg-zLY3vG%&
zbEmdUi+$e5;-YZnhU@*4TdJ~u_RG(^RQYAD54S^e{<Y;EEkSPm40E;=FTH3m?|{L)
zhWYxv40HPO->kXvOz}G#gTtxf-E;3;{8UhvxP1SvMn|K&0dDa{?`Lh;$?miA>oxAl
z{xNe)Pfj^u6UZ>()1B)I(KQSOi+lDxzW4d6bZBVcDPe6bNnrRhc)I$ztaD0e0s!n+
BxgG!j

literal 0
HcmV?d00001

diff --git a/ruoyi-admin/src/main/resources/static/img/model/label2.png b/ruoyi-admin/src/main/resources/static/img/model/label2.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f1bd4cb32d9632bf0f56ef69eef4fc7b5a9e452
GIT binary patch
literal 3511
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
F{{sfY*dhP`

literal 0
HcmV?d00001

diff --git a/ruoyi-admin/src/main/resources/static/js/three/examples/jsm/renderers/CSS2DRenderer.js b/ruoyi-admin/src/main/resources/static/js/three/examples/jsm/renderers/CSS2DRenderer.js
index 6d67931..043e6aa 100644
--- a/ruoyi-admin/src/main/resources/static/js/three/examples/jsm/renderers/CSS2DRenderer.js
+++ b/ruoyi-admin/src/main/resources/static/js/three/examples/jsm/renderers/CSS2DRenderer.js
@@ -3,7 +3,7 @@ import {
 	Object3D,
 	Vector2,
 	Vector3
-} from 'three';
+} from '/js/three/src/Three.js';
 
 class CSS2DObject extends Object3D {
 
diff --git a/ruoyi-manage/src/main/resources/templates/manage/model/model.html b/ruoyi-manage/src/main/resources/templates/manage/model/model.html
index 08bc091..585909b 100644
--- a/ruoyi-manage/src/main/resources/templates/manage/model/model.html
+++ b/ruoyi-manage/src/main/resources/templates/manage/model/model.html
@@ -4,85 +4,12 @@
   <th:block th:include="include :: header('模型')"/>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js">
   </script>
-    <script type="module">
-      import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js'
-      import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js'
-      import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js'
-      import * as THREE from '/js/three/build/three.module.min.js'
-
-
-      const scene = new THREE.Scene()
-      // scene.background = new THREE.Color(0x000000,0)
-      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000);
-      const pointLight = new THREE.PointLight(0xffffff, 10) //光源颜色 光照强度
-      const ambient = new THREE.AmbientLight(0xffffff, 2)
-      const light = new THREE.DirectionalLight(0xffffff, 1)
-      const renderer = new THREE.WebGLRenderer({
-        // antialias: true,
-        alpha: true,
-      })
-      renderer.setClearColor(0x000000, 0)
-      const controls = new OrbitControls(camera, renderer.domElement)
-      controls.target = new THREE.Vector3(-250, -872, 1814)
-      controls.update()
-      renderer.setSize(window.innerWidth, window.innerHeight)
-      camera.position.set(-1218,2326,3986)
-      camera.rotation.x = -0.9744
-      camera.rotation.y = -0.2453
-      camera.rotation.z = -0.3435
-      camera.updateProjectionMatrix()
-      controls.update()
-      // scene.add(pointLight)
-      scene.add(ambient)
-      light.position.set(-250, 872, 1814)
-      light.target.position.set(-1218,2326,3986)
-      // scene.add(light)
-      console.log(renderer)
-      document.getElementById('three').appendChild(renderer.domElement)
-
-
-      const geometry = new THREE.BoxGeometry(1, 1, 1);
-      const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
-      const cube = new THREE.Mesh(geometry, material);
-      scene.add(cube);
-
-
-
-      function animate() {
-        requestAnimationFrame(animate)
-        renderer.render(scene, camera)
-      }
-
-      animate()
-
-      let mtlLoader = new MTLLoader()
-      mtlLoader.load(`/model/daxingjichang/daxingjichang.mtl`,
-              materials => {
-                materials.preload()
-                let loader = new OBJLoader()
-                loader.setMaterials(materials)
-                loader.load(
-                        `/model/daxingjichang/daxingjichang.obj`,
-                        object => {
-                          scene.add(object)
-                          // 更新渲染器
-                          renderer.render(scene, camera)
-                        },
-                        xhr => {
-
-                        },
-                        (err) => {
-                        }
-                )
-              })
-
-
-    </script>
 </head>
 <style>
-  body::-webkit-scrollbar{
+  body::-webkit-scrollbar {
     display: none;
   }
+
   .bg {
     width: 100vw;
     height: 100vh;
@@ -113,7 +40,8 @@
     white-space: nowrap;
     overflow: auto;
   }
-  .btns::-webkit-scrollbar{
+
+  .btns::-webkit-scrollbar {
     display: none;
   }
 
@@ -164,6 +92,30 @@
     background-repeat: no-repeat;
   }
 
+  .threeLabelContent {
+    width: 100px;
+    height: auto;
+    color: #fff;
+    text-align: center;
+    background-color: rgba(23, 48, 97, 0.8);
+    border: 2px #fff3 solid;
+    transform: translateY(-50%);
+  }
+
+
+  .threeLabelContent:before {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    content: '';
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 10px solid rgba(23, 48, 97, 0.8);
+  }
+
 </style>
 <body class="gray-bg">
 <!--  29.4  39.8 50.1 59.6  68.8 -->
@@ -172,21 +124,146 @@
   <div id="three" style="width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;"></div>
   <div class="btns" id="btns">
   </div>
+  <div class="threeLabel" id="threeLabel">
+    <div class="threeLabelContent" id="threeLabelContent"></div>
+  </div>
 </div>
 <th:block th:include="include :: footer"/>
 <script>
-  const btnClick = (el,id) => {
-    $(el).children('.qyBottom').css({display:'inline-block'})
-    $(el).siblings().each(function (){
-      $(this).children('.qyBottom').css({display:'none'})
+  let scene = null
+  let label = null
+  let controls = null
+  let camera = null
+</script>
+<script name="module1" type="module">
+  import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js'
+  import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js'
+  import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js'
+  import * as THREE from '/js/three/build/three.module.min.js'
+  import {CSS2DObject, CSS2DRenderer} from '/js/three/examples/jsm/renderers/CSS2DRenderer.js'
+
+
+  scene = new THREE.Scene()
+  // scene.background = new THREE.Color(0x000000,0)
+  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000);
+  const pointLight = new THREE.PointLight(0xffffff, 10) //光源颜色 光照强度
+  const ambient = new THREE.AmbientLight(0xffffff, 2)
+  const light = new THREE.DirectionalLight(0xffffff, 1)
+  const labelRenderer = new CSS2DRenderer()
+  const renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    alpha: true,
+    logarithmicDepthBuffer: true,
+  })
+  renderer.setClearColor(0x000000, 0)
+  controls = new OrbitControls(camera, renderer.domElement)
+  controls.target = new THREE.Vector3(-250, -872, 1814)
+  controls.update()
+  renderer.setSize(window.innerWidth, window.innerHeight)
+  camera.position.set(-1218, 2326, 3986)
+  camera.rotation.x = -0.9744
+  camera.rotation.y = -0.2453
+  camera.rotation.z = -0.3435
+  camera.updateProjectionMatrix()
+  controls.update()
+  // scene.add(pointLight)
+  scene.add(ambient)
+  light.position.set(-250, 872, 1814)
+  light.target.position.set(-1218, 2326, 3986)
+  // scene.add(light)
+  console.log(renderer)
+  document.getElementById('three').appendChild(renderer.domElement)
+  labelRenderer.setSize(window.innerWidth, window.innerHeight)
+  labelRenderer.domElement.style.position = 'absolute'
+  labelRenderer.domElement.style.top = '0'
+  labelRenderer.domElement.style.pointerEvents = 'none'
+  document.body.appendChild(labelRenderer.domElement)
+  label = new CSS2DObject(document.getElementById('threeLabel'))
+  label.position.set(-999999, -999999, -999999)
+  scene.add(label)
+
+
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
+  const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
+  const cube = new THREE.Mesh(geometry, material);
+  scene.add(cube);
+
+
+  function animate() {
+    requestAnimationFrame(animate)
+    renderer.render(scene, camera)
+    labelRenderer.render(scene, camera)
+  }
+
+  animate()
+
+  let mtlLoader = new MTLLoader()
+  mtlLoader.load(`/model/daxingjichang/daxingjichang.mtl`,
+          materials => {
+            materials.preload()
+            let loader = new OBJLoader()
+            loader.setMaterials(materials)
+            loader.load(
+                    `/model/daxingjichang/daxingjichang.obj`,
+                    object => {
+                      scene.add(object)
+                      // 更新渲染器
+                      renderer.render(scene, camera)
+                    },
+                    xhr => {
+
+                    },
+                    (err) => {
+                    }
+            )
+          })
+
+
+  let mouse = new THREE.Vector2()
+  let raycaster = new THREE.Raycaster()
+  document.addEventListener('dblclick', function (event) {
+    // 将鼠标位置转换为二维向量
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
+
+    // 使用鼠标的位置和相机进行raycasting
+    raycaster.setFromCamera(mouse, camera)
+
+    // 计算物体和鼠标点的交点
+    let intersects = raycaster.intersectObjects(scene.children)
+
+    // 如果有交点
+    if (intersects.length > 0) {
+      let obj = intersects[0]
+      console.log(obj)
+
+      renderer.render(scene, camera)
+    }
+  }, false)
+
+</script>
+<script>
+  const btnClick = (el, id) => {
+    $(el).children('.qyBottom').css({display: 'inline-block'})
+    $(el).siblings().each(function () {
+      $(this).children('.qyBottom').css({display: 'none'})
     })
 
-    $.post(ctx + 'api/getCountNumberById', {id:id.toString()}, (e) => {
+    $.post(ctx + 'api/getCountNumberById', {id: id.toString()}, (e) => {
       console.log(e)
+      label.position.set(405, -5, 3423)
+      $("#threeLabelContent").html(e.data.map(v => `${v.areaName} - ${v.countNumber}`).join('<br>'))
+
+      camera.position.set(383,439,3553)
+      camera.rotation.x = -0.9742
+      camera.rotation.y = -0.2454
+      camera.rotation.z = -0.3435
+      controls.target = new THREE.Vector3(832,-1042,2547)
+      camera.updateProjectionMatrix()
+      controls.update()
     })
   }
-</script>
-<script>
+
   $.post(ctx + 'api/getArea', {}, (e) => {
     let html = ``
     e.data.forEach(v => {