修改模型

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 {
 

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) => {
+  let scene = null
-    $(el).children('.qyBottom').css({display:'inline-block'})
+  let label = null
-    $(el).siblings().each(function (){
+  let controls = null
-      $(this).children('.qyBottom').css({display:'none'})
+  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 => {