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 @@
+
运行信息
@@ -182,6 +183,7 @@