修改点击模型聚焦视角

6 months ago · 7ece2e3e1b
parent 9d0c2c833f
commit 7ece2e3e1b
3 changed files with 61 additions and 160 deletions
--- a/hw-ui/src/components/model/demo.vue
+++ b/hw-ui/src/components/model/demo.vue
@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div class="model">112233</div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Demo",
+  components: {},
+  mounted() {
+  },
+  metaInfo() {
+  }
+};
+</script>
+<style scope>
+.model {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  transform: translate(-100%, -100%);
+  color: #fff;
+}
+</style>
--- a/hw-ui/src/views/board/model/index.vue
+++ b/hw-ui/src/views/board/model/index.vue
@ -1,6 +1,11 @@
 <template>
+  <div>
    <div ref="threeJs" class="app-container">
    </div>
+    <div ref="demo">
+      <Demo/>
+    </div>
+  </div>
 </template>

 <script>
@ -9,6 +14,7 @@ import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js';
 import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader.js';
 import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
 import {CSS2DObject, CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer";
+import Demo from '@/components/model/demo.vue'


 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
@ -16,7 +22,7 @@ let a = 0
 let lastModel = null
 export default {
  name: 'Model',
-  components: {},
+  components: {Demo},
  data() {
    return {}
  },
@ -26,9 +32,10 @@ export default {
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000000000);


-    // camera.position.set(1, 1, 1);
-    camera.position.set(289, 1559, 1298);
-    camera.lookAt(285, -66, -15);
+    camera.position.set(1, 1, 1);
+    // camera.position.set(-21325, 588, -56323);
+    // camera.lookAt(285, -66, -15);
+    camera.lookAt(1, 1, -1);
    camera.updateProjectionMatrix();

    const renderer = new THREE.WebGLRenderer({
@ -53,7 +60,6 @@ export default {
    light.target.position.set(0, 0, 0);
    scene.add(light)

-    // camera.position.z = 5;
    const loadF = (e) => {
      let str = '/1'
      e.forEach(v => {
@ -97,16 +103,14 @@ export default {
    const labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.domElement.style.position = 'absolute';
-    labelRenderer.domElement.style.top = 0;
+    labelRenderer.domElement.style.top = '0';
    labelRenderer.domElement.style.pointerEvents = 'none';
    document.body.appendChild(labelRenderer.domElement);

 // 创建CSS2DObject
-    const label = document.createElement('div');
-    label.style.color = '#fff';
-    label.innerHTML = '这是提示窗口';
+    const label = this.$refs.demo
    const labelObject = new CSS2DObject(label);
-    labelObject.position.set(289, 1559, 1298); // 根据需要调整位置
+    labelObject.position.set(-21325, 550, -56323); // 根据需要调整位置
    scene.add(labelObject);


@ -116,6 +120,18 @@ export default {
 // 创建一个二维空间的向量用于存储鼠标点击的屏幕位置
    var mouse = new THREE.Vector2();

+    function getModelById(id) {
+      // 遍历场景中的所有对象
+      const objects = scene.children.filter(obj => obj.type === 'Group' || obj.type === 'Object3D');
+      for (const obj of objects) {
+        if (obj.id === id) {
+          // 返回匹配ID的模型
+          return obj;
+        }
+      }
+      return null;
+    }
+
 // 监听鼠标点击事件
    document.addEventListener('dblclick', function (event) {
      // 将鼠标位置转换为二维向量
@ -130,16 +146,13 @@ export default {

      // 如果有交点
      if (intersects.length > 0) {
-        // 获取第一个交点的对象
        var obj = intersects[0].object;
-        console.log('Clicked object:', obj);
-        outlineObj(obj.parent)
-        // obj.parent.children.forEach(e => {
-        //   e.material.color.set(0xff0000);
-        // })
-        // obj.material.color.set(0xff0000);
-        alert(obj.parent?.name || obj.name)
-        // 你可以在这里添加你想要的逻辑，比如高亮被点击的模型等
+        camera.position.set((intersects[0].point.x + 5000), (intersects[0].point.y + 5000), (intersects[0].point.z - 1000));
+        camera.updateProjectionMatrix();
+        controls.target = new THREE.Vector3(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z)
+        controls.update();
+
+        renderer.render(scene, camera);
      }
    }, false);

@ -152,8 +165,8 @@ export default {
    }

    setInterval(() => {
-      // console.log(camera)
-    }, 1000)
+      console.log(camera)
+    }, 1000 * 10)

    animate();

--- a/hw-ui/vue.config.js
+++ b/hw-ui/vue.config.js
@ -1,138 +0,0 @@
-'use strict'
-const path = require('path')
-
-function resolve(dir) {
-  return path.join(__dirname, dir)
-}
-
-const CompressionPlugin = require('compression-webpack-plugin')
-
-const name = process.env.VUE_APP_TITLE || '京源环保管理系统' // 网页标题
-
-const port = process.env.port || process.env.npm_config_port || 7018 // 端口
-
-// vue.config.js 配置说明
-//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
-// 这里只列一部分，具体配置参考文档
-module.exports = {
-  // 部署生产环境和开发环境下的URL。
-  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
-  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
-  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
-  outputDir: 'dist',
-  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
-  assetsDir: 'static',
-  // 是否开启eslint保存检测，有效值：ture | false | 'error'
-  lintOnSave: process.env.NODE_ENV === 'development',
-  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
-  productionSourceMap: false,
-  // webpack-dev-server 相关配置
-  devServer: {
-    host: '0.0.0.0',
-    port: port,
-    open: true,
-    proxy: {
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
-      [process.env.VUE_APP_BASE_API]: {
-        target: `http://175.27.215.92:7080`,
-        // target: `http://localhost:7080`,
-        // target: `http://192.168.1.114:7080`,
-        // target: `http://10.11.40.120:7080`,
-        // target: `http://10.11.43.2:7080`,
-        changeOrigin: true,
-        pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
-        }
-      }
-    },
-    disableHostCheck: true
-  },
-  css: {
-    loaderOptions: {
-      sass: {
-        sassOptions: { outputStyle: "expanded" }
-      }
-    }
-  },
-  configureWebpack: {
-    name: name,
-    resolve: {
-      alias: {
-        '@': resolve('src')
-      }
-    },
-    plugins: [
-      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
-      new CompressionPlugin({
-        cache: false,                   // 不启用文件缓存
-        test: /\.(js|css|html)?$/i,     // 压缩文件格式
-        filename: '[path].gz[query]',   // 压缩后的文件名
-        algorithm: 'gzip',              // 使用gzip压缩
-        minRatio: 0.8                   // 压缩率小于1才会压缩
-      })
-    ],
-  },
-  chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
-
-    // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/assets/icons'))
-      .end()
-    config.module
-      .rule('icons')
-      .test(/\.svg$/)
-      .include.add(resolve('src/assets/icons'))
-      .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
-      .options({
-        symbolId: 'icon-[name]'
-      })
-      .end()
-
-    config.when(process.env.NODE_ENV !== 'development', config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
-
-          config.optimization.splitChunks({
-            chunks: 'all',
-            cacheGroups: {
-              libs: {
-                name: 'chunk-libs',
-                test: /[\\/]node_modules[\\/]/,
-                priority: 10,
-                chunks: 'initial' // only package third parties that are initially dependent
-              },
-              elementUI: {
-                name: 'chunk-elementUI', // split elementUI into a single package
-                test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
-                priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
-              },
-              commons: {
-                name: 'chunk-commons',
-                test: resolve('src/components'), // can customize your rules
-                minChunks: 3, //  minimum common number
-                priority: 5,
-                reuseExistingChunk: true
-              }
-            }
-          })
-
-          config.optimization.runtimeChunk('single'),
-          {
-             from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
-             to: './' //到根目录下
-          }
-    })
-  }
-}