修改模型

ruoyi-admin/src/main/resources/static/model/daxingjichang/daxingjichang.mtl

@@ -1,5 +1,5 @@
 # 3ds Max Wavefront OBJ Exporter v0.99 - (c)2007 guruware
-# 创建的文件:11.10.2024 09:26:52
+# 创建的文件:14.10.2024 13:25:02
 
 newmtl Mat3d66_1176892_7_9595
 	Kd 0.7109 0.7109 0.7109
@@ -16,17 +16,21 @@ newmtl Mat3d66_1176892_7_9595
 	illum 2
 
 newmtl wire_190039004
-	Ns 32
-	d 1
-	Tr 0
-	Tf 1 1 1
-	illum 2
-	Ka 0.7451 0.1529 0.0157
 	Kd 0.7451 0.1529 0.0157
 	Ks 0.3500 0.3500 0.3500
+	Tr 0.0000
+	d 1.0000
+	Tf 1.0000 1.0000 1.0000
+	Pr 0.6800
+	Pm 0.0000
+	Pc 0.0000
+	Pcr 0.0000
+	Ni 1.5000
+	Ke 0.0000 0.0000 0.0000
+	illum 2
 
 newmtl wire_255255000
-	Kd 1.0000 1.0000 0.0000
+	Kd 1.0000 1.0000 1.0000
 	Ks 0.3500 0.3500 0.3500
 	Tr 0.0000
 	d 1.0000

ruoyi-manage/src/main/resources/templates/manage/model/model.html

@@ -4,86 +4,85 @@
   <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">-->
+    <script type="module">
-  <!--    import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js'-->
+      import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js'
-  <!--    import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js'-->
+      import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js'
-  <!--    import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js'-->
+      import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js'
-  <!--    import * as THREE from '/js/three/build/three.module.min.js'-->
+      import * as THREE from '/js/three/build/three.module.min.js'
-
+
-  <!--    console.log(OrbitControls)-->
+
-
+      const scene = new THREE.Scene()
-  <!--    const scene = new THREE.Scene()-->
+      // scene.background = new THREE.Color(0x000000,0)
-  <!--    // scene.background = new THREE.Color(0x000000,0)-->
+      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000);
-  <!--    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000000000000000000);-->
+      const pointLight = new THREE.PointLight(0xffffff, 10) //光源颜色 光照强度
-  <!--    const pointLight = new THREE.PointLight(0xffffff, 1) //光源颜色 光照强度-->
+      const ambient = new THREE.AmbientLight(0xffffff, 2)
-  <!--    const ambient = new THREE.AmbientLight(0xffffff, 1)-->
+      const light = new THREE.DirectionalLight(0xffffff, 1)
-  <!--    const light = new THREE.DirectionalLight(0xffffff, 1)-->
+      const renderer = new THREE.WebGLRenderer({
-  <!--    const renderer = new THREE.WebGLRenderer({-->
+        // antialias: true,
-  <!--      // antialias: true,-->
+        alpha: true,
-  <!--      alpha: true,-->
+      })
-  <!--    })-->
+      renderer.setClearColor(0x000000, 0)
-  <!--    renderer.setClearColor(0x000000, 0)-->
+      const controls = new OrbitControls(camera, renderer.domElement)
-  <!--    const controls = new OrbitControls(camera, renderer.domElement)-->
+      controls.target = new THREE.Vector3(-250, -872, 1814)
-  <!--    controls.target = new THREE.Vector3(-1, -1, -1)-->
+      controls.update()
-  <!--    controls.update()-->
+      renderer.setSize(window.innerWidth, window.innerHeight)
-  <!--    renderer.setSize(window.innerWidth, window.innerHeight)-->
+      camera.position.set(-1218,2326,3986)
-  <!--    camera.position.set(5, 5, 5)-->
+      camera.rotation.x = -0.9744
-  <!--    camera.updateProjectionMatrix()-->
+      camera.rotation.y = -0.2453
-  <!--    scene.add(pointLight)-->
+      camera.rotation.z = -0.3435
-  <!--    scene.add(ambient)-->
+      camera.updateProjectionMatrix()
-  <!--    light.position.set(66, 66, 66)-->
+      controls.update()
-  <!--    light.target.position.set(0, 0, 0)-->
+      // scene.add(pointLight)
-  <!--    scene.add(light)-->
+      scene.add(ambient)
-  <!--    console.log(renderer)-->
+      light.position.set(-250, 872, 1814)
-  <!--    document.getElementById('three').appendChild(renderer.domElement)-->
+      light.target.position.set(-1218,2326,3986)
-
+      // scene.add(light)
-
+      console.log(renderer)
-  <!--    const geometry = new THREE.BoxGeometry(1, 1, 1);-->
+      document.getElementById('three').appendChild(renderer.domElement)
-  <!--    const material = new THREE.MeshBasicMaterial({color: 0x00ff00});-->
+
-  <!--    const cube = new THREE.Mesh(geometry, material);-->
+
-  <!--    scene.add(cube);-->
+      const geometry = new THREE.BoxGeometry(1, 1, 1);
-
+      const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
-  <!--    camera.position.z = 5;-->
+      const cube = new THREE.Mesh(geometry, material);
-
+      scene.add(cube);
-
+
-  <!--    function animate() {-->
+
-  <!--      requestAnimationFrame(animate)-->
+
-  <!--      renderer.render(scene, camera)-->
+      function animate() {
-  <!--    }-->
+        requestAnimationFrame(animate)
-
+        renderer.render(scene, camera)
-  <!--    animate()-->
+      }
-
+
-  <!--    let mtlLoader = new MTLLoader()-->
+      animate()
-  <!--    mtlLoader.load(`/model/model1/daxingjichang.mtl`,-->
+
-  <!--            materials => {-->
+      let mtlLoader = new MTLLoader()
-  <!--              console.log(123123213)-->
+      mtlLoader.load(`/model/daxingjichang/daxingjichang.mtl`,
-  <!--              materials.preload()-->
+              materials => {
-  <!--              let loader = new OBJLoader()-->
+                materials.preload()
-  <!--              loader.setMaterials(materials)-->
+                let loader = new OBJLoader()
-  <!--              loader.load(-->
+                loader.setMaterials(materials)
-  <!--                      `/model/model1/daxingjichang.obj`,-->
+                loader.load(
-  <!--                      object => {-->
+                        `/model/daxingjichang/daxingjichang.obj`,
-  <!--                        scene.add(object)-->
+                        object => {
-  <!--                        // 更新渲染器-->
+                          scene.add(object)
-  <!--                        renderer.render(scene, camera)-->
+                          // 更新渲染器
-  <!--                      },-->
+                          renderer.render(scene, camera)
-  <!--                      xhr => {-->
+                        },
-
+                        xhr => {
-  <!--                      },-->
+
-  <!--                      (err) => {-->
+                        },
-  <!--                      }-->
+                        (err) => {
-  <!--              )-->
+                        }
-  <!--            })-->
+                )
-
+              })
-
+
-  <!--  </script>-->
+
-  <script>
+    </script>
-    const btnClick = (index) => {
-      console.log(index)
-    }
-  </script>
 </head>
 <style>
+  body::-webkit-scrollbar{
+    display: none;
+  }
   .bg {
     width: 100vw;
     height: 100vh;
@@ -100,67 +99,64 @@
     display: block;
   }
 
-  .qy {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    top: 96.5%;
-    width: 1vw;
-    height: 0.5vw;
-    background-image: url("/img/model/zs1.png");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-  }
-
-  .qy1L {
-    left: 26.2%;
-  }
-
-  .qy1R {
-    transform: translate(-50%, -50%) scale(-1);
-    left: 32.6%;
-  }
 
-  .qy2L {
+  .btn1 {
-    left: 36.6%;
+    color: #fff;
   }
 
-  .qy2R {
+  .btns {
-    transform: translate(-50%, -50%) scale(-1);
+    position: absolute;
-    left: 43%;
+    bottom: 0;
+    left: 25%;
+    width: 48vw;
+    height: 3.3vw;
+    white-space: nowrap;
+    overflow: auto;
   }
-
+  .btns::-webkit-scrollbar{
-  .qy3L {
+    display: none;
-    left: 47%;
   }
 
-  .qy3R {
+  .bottomBtn {
-    transform: translate(-50%, -50%) scale(-1);
+    display: inline-block;
-    left: 53.4%;
+    position: relative;
+    width: 9.5vw;
+    height: 3vw;
+    text-align: center;
+    line-height: 3vw;
+    font-size: 1.03vw;
+    letter-spacing: 0.1vw;
+    color: #fff9;
+    cursor: pointer;
   }
 
-  .qy4L {
-    left: 56.4%;
-  }
 
-  .qy4R {
+  .qy {
-    transform: translate(-50%, -50%) scale(-1);
+    position: absolute;
-    left: 62.7%;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    width: 1vw;
+    height: 0.5vw;
+    background-image: url("/img/model/zs1.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
   }
 
-  .qy5L {
+  .qyL {
-    left: 65.6%;
+    left: 12%;
   }
 
-  .qy5R {
+  .qyR {
     transform: translate(-50%, -50%) scale(-1);
-    left: 71.9%;
+    right: calc(12% - 0.5vw);
   }
 
   .qyBottom {
     position: absolute;
+    display: none;
     transform: translate(-50%, -50%);
-    top: 98.5%;
+    bottom: 5%;
-    left: 29.4%;
+    left: 50%;
     width: 7.5vw;
     height: 0.21vw;
     background-image: url("/img/model/zs3.png");
@@ -168,48 +164,45 @@
     background-repeat: no-repeat;
   }
 
-  .bottomBtn {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    top: 96.6%;
-    width: 7.5vw;
-    height: 3vw;
-    text-align: center;
-    line-height: 3vw;
-    font-size: 1.03vw;
-    letter-spacing: 0.1vw;
-    color: #fff9;
-    cursor: pointer;
-  }
-
-  .btn1 {
-    color: #fff;
-  }
-
 </style>
 <body class="gray-bg">
 <!--  29.4  39.8 50.1 59.6  68.8 -->
 <div>
-  <div id="three" style="width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;"></div>
   <div class="bg"></div>
-  <div class="bottomBtn btn1" onclick="btnClick(1)" style="left: 29.4%;">区域01</div>
+  <div id="three" style="width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;"></div>
-  <div class="bottomBtn" onclick="btnClick(2)" style="left: 39.8%;">区域02</div>
+  <div class="btns" id="btns">
-  <div class="bottomBtn" onclick="btnClick(3)" style="left: 50.1%;">区域03</div>
+  </div>
-  <div class="bottomBtn" onclick="btnClick(4)" style="left: 59.6%;">区域04</div>
-  <div class="bottomBtn" onclick="btnClick(5)" style="left: 68.8%;">区域05</div>
-  <div class="qy qy1L"></div>
-  <div class="qy qy1R"></div>
-  <div class="qy qy2L"></div>
-  <div class="qy qy2R"></div>
-  <div class="qy qy3L"></div>
-  <div class="qy qy3R"></div>
-  <div class="qy qy4L"></div>
-  <div class="qy qy4R"></div>
-  <div class="qy qy5L"></div>
-  <div class="qy qy5R"></div>
-  <div class="qyBottom"></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'})
+    })
+
+    $.post(ctx + 'api/getCountNumberById', {id:id.toString()}, (e) => {
+      console.log(e)
+    })
+  }
+</script>
 <script>
+  $.post(ctx + 'api/getArea', {}, (e) => {
+    let html = ``
+    e.data.forEach(v => {
+      html += `
+    <div class="bottomBtn btn1" onclick="btnClick(this,${v.storeId})" style="font-size: ${v.storeName.length > 5 ? '0.8vw' : '1.03vw'}">
+      <div class="qy qyL"></div>
+      <div class="qy qyR"></div>
+      <div class="qyBottom"></div>
+      <span>
+        ${v.storeName}
+      </span>
+    </div>
+        `
+    })
+    $("#btns").html(html)
+  })
 </script>
 </body>
 </html>