+
@@ -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();
diff --git a/hw-ui/vue.config.js b/hw-ui/vue.config.js
deleted file mode 100644
index 12d3719..0000000
--- a/hw-ui/vue.config.js
+++ /dev/null
@@ -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: './' //到根目录下
- }
- })
- }
-}