添加模型

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

@@ -4,82 +4,210 @@
   <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)
+  <!--    console.log(OrbitControls)-->
-
+
-    const scene = new THREE.Scene()
+  <!--    const scene = new THREE.Scene()-->
-    scene.background = new THREE.Color(0x000000)
+  <!--    // scene.background = new THREE.Color(0x000000,0)-->
-    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000000000000000000 );
+  <!--    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000000000000000000);-->
-    const pointLight = new THREE.PointLight(0xffffff, 1) //光源颜色 光照强度
+  <!--    const pointLight = new THREE.PointLight(0xffffff, 1) //光源颜色 光照强度-->
-    const ambient = new THREE.AmbientLight(0xffffff, 1)
+  <!--    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,-->
-    const controls = new OrbitControls(camera, renderer.domElement)
+  <!--    })-->
-    controls.target = new THREE.Vector3(-1,-1,-1)
+  <!--    renderer.setClearColor(0x000000, 0)-->
-    controls.update()
+  <!--    const controls = new OrbitControls(camera, renderer.domElement)-->
-    renderer.setSize(window.innerWidth, window.innerHeight)
+  <!--    controls.target = new THREE.Vector3(-1, -1, -1)-->
-    camera.position.set(5,5,5)
+  <!--    controls.update()-->
-    camera.updateProjectionMatrix()
+  <!--    renderer.setSize(window.innerWidth, window.innerHeight)-->
-    scene.add(pointLight)
+  <!--    camera.position.set(5, 5, 5)-->
-    scene.add(ambient)
+  <!--    camera.updateProjectionMatrix()-->
-    light.position.set(66, 66, 66)
+  <!--    scene.add(pointLight)-->
-    light.target.position.set(0, 0, 0)
+  <!--    scene.add(ambient)-->
-    scene.add(light)
+  <!--    light.position.set(66, 66, 66)-->
-    console.log(renderer)
+  <!--    light.target.position.set(0, 0, 0)-->
-    document.getElementById('three').appendChild(renderer.domElement)
+  <!--    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 );
+  <!--    const geometry = new THREE.BoxGeometry(1, 1, 1);-->
-    scene.add( cube );
+  <!--    const material = new THREE.MeshBasicMaterial({color: 0x00ff00});-->
-
+  <!--    const cube = new THREE.Mesh(geometry, material);-->
-    camera.position.z = 5;
+  <!--    scene.add(cube);-->
-
+
-
+  <!--    camera.position.z = 5;-->
-
+
-    function animate() {
-      requestAnimationFrame(animate)
-      renderer.render(scene, camera)
-    }
 
-    animate()
+  <!--    function animate() {-->
-
+  <!--      requestAnimationFrame(animate)-->
-    let mtlLoader = new MTLLoader()
+  <!--      renderer.render(scene, camera)-->
-    mtlLoader.load(`/model/model1/daxingjichang.mtl`,
+  <!--    }-->
-            materials => {
-              console.log(123123213)
-              materials.preload()
-              let loader = new OBJLoader()
-              loader.setMaterials(materials)
-              loader.load(
-                      `/model/model1/daxingjichang.obj`,
-                      object => {
-                        scene.add(object)
-                        // 更新渲染器
-                        renderer.render(scene, camera)
-                      },
-                      xhr => {
-
-                      },
-                      (err) => {
-                      }
-              )
-            })
 
+  <!--    animate()-->
 
+  <!--    let mtlLoader = new MTLLoader()-->
+  <!--    mtlLoader.load(`/model/model1/daxingjichang.mtl`,-->
+  <!--            materials => {-->
+  <!--              console.log(123123213)-->
+  <!--              materials.preload()-->
+  <!--              let loader = new OBJLoader()-->
+  <!--              loader.setMaterials(materials)-->
+  <!--              loader.load(-->
+  <!--                      `/model/model1/daxingjichang.obj`,-->
+  <!--                      object => {-->
+  <!--                        scene.add(object)-->
+  <!--                        // 更新渲染器-->
+  <!--                        renderer.render(scene, camera)-->
+  <!--                      },-->
+  <!--                      xhr => {-->
+
+  <!--                      },-->
+  <!--                      (err) => {-->
+  <!--                      }-->
+  <!--              )-->
+  <!--            })-->
+
+
+  <!--  </script>-->
+  <script>
+    const btnClick = (index) => {
+      console.log(index)
+    }
   </script>
 </head>
+<style>
+  .bg {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-image: url("/img/model/bg.jpg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+
+  #three canvas {
+    background-color: transparent;
+    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 {
+    left: 36.6%;
+  }
+
+  .qy2R {
+    transform: translate(-50%, -50%) scale(-1);
+    left: 43%;
+  }
+
+  .qy3L {
+    left: 47%;
+  }
+
+  .qy3R {
+    transform: translate(-50%, -50%) scale(-1);
+    left: 53.4%;
+  }
+
+  .qy4L {
+    left: 56.4%;
+  }
+
+  .qy4R {
+    transform: translate(-50%, -50%) scale(-1);
+    left: 62.7%;
+  }
+
+  .qy5L {
+    left: 65.6%;
+  }
+
+  .qy5R {
+    transform: translate(-50%, -50%) scale(-1);
+    left: 71.9%;
+  }
+
+  .qyBottom {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 98.5%;
+    left: 29.4%;
+    width: 7.5vw;
+    height: 0.21vw;
+    background-image: url("/img/model/zs3.png");
+    background-size: 100% 100%;
+    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 class="bottomBtn" onclick="btnClick(2)" style="left: 39.8%;">区域02</div>
+  <div class="bottomBtn" onclick="btnClick(3)" style="left: 50.1%;">区域03</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>
 <script>
 </script>