diff --git a/src/App.vue b/src/App.vue index 1bc5aa3..28a5d3c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,7 @@ - + @@ -19,7 +19,7 @@ import viewIndex from '@/layout/view_index.vue'; import zhCn from 'element-plus/es/locale/lang/zh-cn'; // xq 组件 // F:\vue\workspace\maotu-webtopo\src\components\StompDemo.vue -import StompDemo from '@/components/StompDemo.vue'; +// import StompDemo from '@/components/StompDemo.vue'; import VueMyTest from '@/components/my-test.vue'; import VueMyButton from '@/components/my-button.vue'; @@ -197,6 +197,11 @@ leftAsideStore.registerConfig('vue四遥组件', [ val: '', title: '绑定ID' }, + showInfo: { + type: 'switch', + val: true, + title: '显示详情' + }, location: { type: 'select', val: 'bottom', @@ -476,6 +481,12 @@ leftAsideStore.registerConfig('vue公共组件', [ type: 'switch', val: true, title: '辅助框' + }, + testStr: { + type: 'map', + val: {}, + title: '测试', + disabled: true } } }, diff --git a/src/components/mt-edit.zip b/src/components/mt-edit.zip new file mode 100644 index 0000000..afdaf91 Binary files /dev/null and b/src/components/mt-edit.zip differ diff --git a/src/components/mt-edit/store/types.ts b/src/components/mt-edit/store/types.ts index ad0a7d4..45868ed 100644 --- a/src/components/mt-edit/store/types.ts +++ b/src/components/mt-edit/store/types.ts @@ -10,7 +10,8 @@ export type ILeftAsideConfigItemPublicPropsType = | 'upload' | 'inputSelectId' | 'inputTypeTag' //inputTypeTag 必须和 inputSelectId 一起使用 - | 'inputSelectImgId'; + | 'inputSelectImgId' + | 'map'; //使用这个类型 disabled必须为true(必须隐藏) // 开放注册配置 export type ILeftAsideConfigItemPublicProps = Record< string, diff --git a/src/components/three-components/vue-three-substation.vue b/src/components/three-components/vue-three-substation.vue index cb4f803..0cc3f6f 100644 --- a/src/components/three-components/vue-three-substation.vue +++ b/src/components/three-components/vue-three-substation.vue @@ -13,7 +13,7 @@ @@ -215,6 +309,7 @@ onUnmounted(() => { top: 50%; left: 2%; transform: translateY(-50%); /* 垂直居中 */ + transform: translateZ(0); display: flex; flex-direction: column; gap: 20px; diff --git a/src/components/three-components/vue-three-substation_edit.vue b/src/components/three-components/vue-three-substation_edit.vue index fe92559..136e0c5 100644 --- a/src/components/three-components/vue-three-substation_edit.vue +++ b/src/components/three-components/vue-three-substation_edit.vue @@ -77,15 +77,18 @@ scene.add(camera); //渲染器 const render = new WebGLRenderer({ - antialias: false, // 关闭抗锯齿提升性能 - powerPreference: 'high-performance', // 使用高性能GPU - stencil: false, // 如果不需要模板缓冲区 + antialias: true, // 开启抗锯齿(性能允许的情况下) + powerPreference: 'high-performance', + stencil: false, depth: true, - logarithmicDepthBuffer: true // 对大场景有帮助 + logarithmicDepthBuffer: true, + precision: 'mediump' // 使用中等精度着色器,提升性能 }); render.setClearColor(new Color('#131519')); +render.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 限制像素比,提升性能 // 启用渲染优化 -render.shadowMap.enabled = false; // 如果不需要阴影 +render.shadowMap.enabled = false; +render.shadowMap.autoUpdate = false; // 停止自动更新阴影 //添加控制器 const controls = new OrbitControls(camera, render.domElement); @@ -94,15 +97,14 @@ const controls = new OrbitControls(camera, render.domElement); // controls.autoRotate = false; // controls.enablePan = false; // 禁用右键平移 controls.autoRotateSpeed = 1; -controls.dampingFactor = 0.2; -controls.rotateSpeed = 0.3; // 降低旋转速度(默认为 1.0) -controls.enableDamping = true; +controls.dampingFactor = 0.05; // 降低阻尼系数,减少计算量 +controls.rotateSpeed = 0.5; // 提高旋转速度,操作更流畅 +controls.enableDamping = false; // 关闭阻尼,大幅提升性能 controls.enableRotate = true; -controls.minDistance = 1; // 允许更近距离观察模型细节 -// 设置视角限制:向上45度,向下45度 -// 从正前方开始计算,向上最大45度,向下最大45度 -controls.minPolarAngle = Math.PI / 4; // 向上最多45度 (π/4) -controls.maxPolarAngle = (Math.PI * 3) / 4; // 向下最多45度 (3π/4) +controls.minDistance = 1; +// 设置视角限制 +controls.minPolarAngle = Math.PI / 4; +controls.maxPolarAngle = (Math.PI * 3) / 4; const loader = new GLTFLoader(); const dracoLoader = new DRACOLoader(); @@ -137,15 +139,28 @@ loader.load( async (gltf: any) => { console.log('文件下载完成,开始解析模型...'); - // 大场景优化:设置对象渲染顺序 + // 性能优化:合并几何体 + const mergedMeshes: any[] = []; + gltf.scene.traverse((child: any) => { if (child.isMesh) { // 优化大场景渲染 - child.frustumCulled = true; // 启用视锥体剔除 + child.frustumCulled = true; + if (child.material) { // 优化材质 - child.material.side = 0; // FrontSide - 只渲染正面 + child.material.side = 0; + child.material.needsUpdate = true; + + // 如果材质有贴图,设置合适的过滤方式 + if (child.material.map) { + child.material.map.minFilter = THREE.LinearMipMapLinearFilter; + child.material.map.magFilter = THREE.LinearFilter; + } } + + // 合并使用相同材质的网格 + mergedMeshes.push(child); } }); @@ -160,7 +175,8 @@ loader.load( } const loadTime = Date.now() - startTime; - console.log(`大场景模型完全加载并显示,总耗时: ${loadTime}ms`); + console.log(`大场景模型完全加载并显示,总耗时:${loadTime}ms`); + console.log(`模型网格数量:${mergedMeshes.length}`); }, // 真正的流式加载进度 (xhr) => { @@ -188,14 +204,17 @@ nextTick(() => { } }); -//环境贴图 -const rgbELoader = new RGBELoader().load( - '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', - (envMap: any) => { - envMap.mapping = EquirectangularReflectionMapping; - scene.environment = envMap; - } -); +//环境贴图(延迟加载,避免与模型同时加载) +setTimeout(() => { + const rgbELoader = new RGBELoader().load( + '/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', + (envMap: any) => { + envMap.mapping = EquirectangularReflectionMapping; + scene.environment = envMap; + console.log('环境贴图加载完成'); + } + ); +}, 500); // 延迟 500ms 加载环境贴图 //补间动画 const timeline1 = gsap.timeline(); @@ -242,7 +261,8 @@ function handleResize() { function init() { requestAnimationFrame(init); - controls.update(); + // 只在需要时更新控制器 + // controls.update(); // 已关闭阻尼,不需要每帧更新 render.render(scene, camera); } diff --git a/src/components/vue-xq-test/vue-run-info.vue b/src/components/vue-xq-test/vue-run-info.vue index 3195e7d..1417e74 100644 --- a/src/components/vue-xq-test/vue-run-info.vue +++ b/src/components/vue-xq-test/vue-run-info.vue @@ -1,4 +1,5 @@