@kimap/indoor-positioning-sdk-vue2 5.2.9 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimap/indoor-positioning-sdk-vue2",
-  "version": "5.2.9",
+  "version": "5.3.0",
   "description": "Vue2自包含室内定位SDK - 完全兼容Webpack3+Babel6 | Vue2 Self-Contained Indoor Positioning SDK",
   "main": "index.js",
   "files": [

package/src/core/KimapSDK.js

@@ -93,9 +93,6 @@ KimapSDK.prototype.init = function() {
       // 创建科技感地面背景
       self._createTechGround();
 
-      // 启动道路动画循环
-      self._startRoadAnimationLoop();
-
       // 加载背景建筑
       if (self.backgroundBuildingsConfig.enabled !== false) {
         self._loadBackgroundBuildings();
@@ -105,6 +102,12 @@ KimapSDK.prototype.init = function() {
       self.startRenderLoop();
       self._extractWallsFromModel();
 
+      // 多楼层模式：默认显示第一个（最低）楼层，不自动切换到ALL模式
+      if (self.isMultiFloor && self.floorGroups.length > 0) {
+        self.currentFloorIndex = 1; // 1 表示第一个实际楼层（0是ALL）
+        self._showSingleFloor(0); // 显示索引0的楼层
+      }
+
       return self;
     });
 };
@@ -749,19 +752,40 @@ KimapSDK.prototype._onFloorButtonClick = function(index) {
 KimapSDK.prototype._showAllFloors = function() {
   var self = this;
 
-  // 淡出当前楼层（如果有）
+  // 显示所有楼层，并设置淡蓝色半透明效果
   if (this.floorGroups && this.floorGroups.length > 0) {
     this.floorGroups.forEach(function(group) {
       group.visible = true;
-      // 淡入楼层
-      self._fadeInGroup(group, 400);
+      // 设置淡蓝色半透明效果
+      group.traverse(function(child) {
+        if (child.material) {
+          if (Array.isArray(child.material)) {
+            child.material.forEach(function(mat) {
+              if (mat.opacity !== undefined) {
+                mat.transparent = true;
+                mat.opacity = 0.5;
+                // 设置淡蓝色
+                if (mat.color) {
+                  mat.color.setHex(0x88ccff);
+                }
+              }
+            });
+          } else if (child.material.opacity !== undefined) {
+            child.material.transparent = true;
+            child.material.opacity = 0.5;
+            // 设置淡蓝色
+            if (child.material.color) {
+              child.material.color.setHex(0x88ccff);
+            }
+          }
+        }
+      });
     });
   }
 
-  // 淡入背景建筑
+  // 显示背景建筑
   if (this.backgroundGroup) {
     this.backgroundGroup.visible = true;
-    this._fadeInBackgroundBuildings(600);
   }
 
   // 隐藏家具（ALL模式不显示家具）
@@ -829,14 +853,32 @@ KimapSDK.prototype._fadeInGroup = function(group, duration) {
 KimapSDK.prototype._showSingleFloor = function(floorIndex) {
   var self = this;
 
-  // 淡出所有楼层，然后只显示目标楼层
+  // 隐藏所有楼层，然后只显示目标楼层
   if (this.floorGroups && this.floorGroups.length > 0) {
     this.floorGroups.forEach(function(group, index) {
+      group.visible = (index === floorIndex);
+      // 恢复材质属性：移除透明效果，恢复原始颜色
       if (index === floorIndex) {
-        group.visible = true;
-        self._fadeInGroup(group, 300);
-      } else {
-        group.visible = false;
+        group.traverse(function(child) {
+          if (child.material) {
+            if (Array.isArray(child.material)) {
+              child.material.forEach(function(mat) {
+                // 移除透明效果，恢复可见性
+                mat.transparent = false;
+                mat.opacity = 1;
+                // 确保使用双面渲染避免黑边
+                mat.side = THREE.DoubleSide;
+                // 开启深度写入
+                mat.depthWrite = true;
+              });
+            } else if (child.material.opacity !== undefined) {
+              child.material.transparent = false;
+              child.material.opacity = 1;
+              child.material.side = THREE.DoubleSide;
+              child.material.depthWrite = true;
+            }
+          }
+        });
       }
     });
   }
@@ -846,9 +888,19 @@ KimapSDK.prototype._showSingleFloor = function(floorIndex) {
     this.backgroundGroup.visible = false;
   }
 
-  // 显示家具
-  if (this.furnitureGroup) {
-    this.furnitureGroup.visible = true;
+  // 重新加载该楼层的家具
+  if (this.dataUrl && this.config.objUrl) {
+    // 获取当前楼层的URL
+    var objUrls = Array.isArray(this.config.objUrl) ? this.config.objUrl : [this.config.objUrl];
+    if (objUrls[floorIndex]) {
+      // 保存当前objUrl，加载完成后恢复
+      var originalObjUrl = this.config.objUrl;
+      this.config.objUrl = objUrls[floorIndex];
+      this.loadKMData().then(function() {
+        // 恢复原始objUrl
+        self.config.objUrl = originalObjUrl;
+      });
+    }
   }
 
   // 调整相机到该楼层（带动画）
@@ -1109,22 +1161,21 @@ KimapSDK.prototype._createBackgroundBuildings = function(GLTFLoader, models, cou
 
 /**
  * 创建备用几何体建筑（当没有模型文件时）
- * 增强版：科技蓝风格，窗户细节
+ * 简化版：柱状建筑，科技感风格
  * @private
  */
 KimapSDK.prototype._createFallbackBuilding = function(x, z) {
-  var height = 30 + Math.random() * 70; // 30-100米高
-  var width = 15 + Math.random() * 25;
-  var depth = 15 + Math.random() * 25;
+  var height = 40 + Math.random() * 60; // 40-100米高
+  var radius = 8 + Math.random() * 8; // 8-16米半径
 
   var buildingGroup = new THREE.Group();
   buildingGroup.position.set(x, 0, z);
 
-  // 主楼体 - 科技蓝渐变
-  var geometry = new THREE.BoxGeometry(width, height, depth);
+  // 主楼体 - 圆柱形建筑
+  var geometry = new THREE.CylinderGeometry(radius, radius, height, 16);
 
   // 科技蓝基础色
-  var baseColor = new THREE.Color().setHSL(0.6 + Math.random() * 0.05, 0.8, 0.25 + Math.random() * 0.1);
+  var baseColor = new THREE.Color().setHSL(0.6 + Math.random() * 0.05, 0.8, 0.3);
   var material = new THREE.MeshStandardMaterial({
     color: baseColor,
     roughness: 0.3,
@@ -1136,85 +1187,30 @@ KimapSDK.prototype._createFallbackBuilding = function(x, z) {
   building.position.y = height / 2;
   buildingGroup.add(building);
 
-  // 添加窗户细节
-  this._addWindowsToBuilding(buildingGroup, width, height, depth);
-
-  // 添加发光边缘
-  this._addGlowingEdges(buildingGroup, width, height, depth);
-
-  return buildingGroup;
-};
-
-/**
- * 为建筑添加窗户细节
- * @private
- */
-KimapSDK.prototype._addWindowsToBuilding = function(buildingGroup, width, height, depth) {
-  var windowWidth = 1.5;
-  var windowHeight = 2;
-  var windowSpacingX = 3;
-  var windowSpacingY = 4;
-
-  var windowMaterial = new THREE.MeshBasicMaterial({
-    color: new THREE.Color().setHSL(0.58, 0.9, 0.7), // 淡蓝色窗户
+  // 添加顶部发光环
+  var ringGeometry = new THREE.TorusGeometry(radius + 1, 0.5, 8, 32);
+  var ringMaterial = new THREE.MeshBasicMaterial({
+    color: 0x00aaff,
     transparent: true,
     opacity: 0.8
   });
+  var ring = new THREE.Mesh(ringGeometry, ringMaterial);
+  ring.rotation.x = Math.PI / 2;
+  ring.position.y = height;
+  buildingGroup.add(ring);
 
-  var windowGeometry = new THREE.PlaneGeometry(windowWidth, windowHeight);
-
-  // 前后面窗户
-  for (var y = 3; y < height - 2; y += windowSpacingY) {
-    for (var xOff = -width / 2 + 2; xOff < width / 2 - 1; xOff += windowSpacingX) {
-      // 前面
-      var windowFront = new THREE.Mesh(windowGeometry, windowMaterial.clone());
-      windowFront.position.set(xOff, y, depth / 2 + 0.1);
-      buildingGroup.add(windowFront);
-
-      // 后面
-      var windowBack = new THREE.Mesh(windowGeometry, windowMaterial.clone());
-      windowBack.position.set(xOff, y, -depth / 2 - 0.1);
-      windowBack.rotation.y = Math.PI;
-      buildingGroup.add(windowBack);
-    }
-  }
-
-  // 左右面窗户
-  for (y = 3; y < height - 2; y += windowSpacingY) {
-    for (var zOff = -depth / 2 + 2; zOff < depth / 2 - 1; zOff += windowSpacingX) {
-      // 右面
-      var windowRight = new THREE.Mesh(windowGeometry, windowMaterial.clone());
-      windowRight.position.set(width / 2 + 0.1, y, zOff);
-      windowRight.rotation.y = Math.PI / 2;
-      buildingGroup.add(windowRight);
-
-      // 左面
-      var windowLeft = new THREE.Mesh(windowGeometry, windowMaterial.clone());
-      windowLeft.position.set(-width / 2 - 0.1, y, zOff);
-      windowLeft.rotation.y = -Math.PI / 2;
-      buildingGroup.add(windowLeft);
-    }
-  }
-};
+  // 添加底部发光环
+  var ring2 = new THREE.Mesh(ringGeometry.clone(), ringMaterial.clone());
+  ring2.rotation.x = Math.PI / 2;
+  ring2.position.y = 0.5;
+  buildingGroup.add(ring2);
 
-/**
- * 为建筑添加发光边缘
- * @private
- */
-KimapSDK.prototype._addGlowingEdges = function(buildingGroup, width, height, depth) {
-  var edgeMaterial = new THREE.LineBasicMaterial({
-    color: new THREE.Color().setHSL(0.58, 1, 0.5), // 科技蓝
-    linewidth: 2
-  });
-
-  var edgesGeometry = new THREE.EdgesGeometry(new THREE.BoxGeometry(width, height, depth));
-  var edges = new THREE.LineSegments(edgesGeometry, edgeMaterial);
-  edges.position.y = height / 2;
-  buildingGroup.add(edges);
+  return buildingGroup;
 };
 
 /**
  * 创建科技感地面背景
+ * 简化版：保持网格效果，移除复杂动画
  * @private
  */
 KimapSDK.prototype._createTechGround = function() {
@@ -1223,120 +1219,23 @@ KimapSDK.prototype._createTechGround = function() {
   var groundSize = 500;
 
   // 创建网格地面
-  var gridHelper = new THREE.GridHelper(groundSize, 50, 0x0066aa, 0x003355);
+  var gridHelper = new THREE.GridHelper(groundSize, 40, 0x004488, 0x002244);
   gridHelper.position.y = -0.1;
-  gridHelper.material.opacity = 0.3;
+  gridHelper.material.opacity = 0.4;
   gridHelper.material.transparent = true;
   this.core.scene.add(gridHelper);
 
   // 创建地面平面
   var groundGeometry = new THREE.PlaneGeometry(groundSize, groundSize);
   var groundMaterial = new THREE.MeshBasicMaterial({
-    color: 0x0a1628,
+    color: 0x080c14,
     transparent: true,
-    opacity: 0.8
+    opacity: 0.9
   });
   var ground = new THREE.Mesh(groundGeometry, groundMaterial);
   ground.rotation.x = -Math.PI / 2;
   ground.position.y = -0.2;
   this.core.scene.add(ground);
-
-  // 创建道路线条
-  this._createRoadLines(groundSize);
-};
-
-/**
- * 创建道路流光线条
- * @private
- */
-KimapSDK.prototype._createRoadLines = function(size) {
-  var roadGroup = new THREE.Group();
-  roadGroup.name = 'roadLines';
-  this.roadLinesGroup = roadGroup;
-
-  var lineCount = 20;
-  var roadWidth = 8;
-
-  for (var i = 0; i < lineCount; i++) {
-    var angle = Math.random() * Math.PI * 2;
-    var length = size * (0.3 + Math.random() * 0.5);
-    var x = Math.cos(angle) * size * 0.4;
-    var z = Math.sin(angle) * size * 0.4;
-
-    // 创建道路
-    var roadGeometry = new THREE.PlaneGeometry(length, roadWidth);
-    var roadMaterial = new THREE.MeshBasicMaterial({
-      color: 0x112233,
-      transparent: true,
-      opacity: 0.6
-    });
-    var road = new THREE.Mesh(roadGeometry, roadMaterial);
-    road.rotation.x = -Math.PI / 2;
-    road.rotation.z = angle;
-    road.position.set(x, 0, z);
-    roadGroup.add(road);
-
-    // 创建中心虚线
-    var dashCount = Math.floor(length / 5);
-    for (var d = 0; d < dashCount; d++) {
-      var dashGeometry = new THREE.PlaneGeometry(2, 0.3);
-      var dashMaterial = new THREE.MeshBasicMaterial({
-        color: 0x00aaff,
-        transparent: true,
-        opacity: 0.8
-      });
-      var dash = new THREE.Mesh(dashGeometry, dashMaterial);
-      dash.rotation.x = -Math.PI / 2;
-      dash.rotation.z = angle;
-      dash.position.set(
-        x + Math.cos(angle) * (d * 5 - length / 2 + 1),
-        0.05,
-        z + Math.sin(angle) * (d * 5 - length / 2 + 1)
-      );
-      dash.userData.baseOpacity = 0.4 + Math.random() * 0.4;
-      dash.userData.phase = Math.random() * Math.PI * 2;
-      dash.userData.speed = 0.5 + Math.random() * 1.5;
-      roadGroup.add(dash);
-    }
-  }
-
-  this.core.scene.add(roadGroup);
-};
-
-/**
- * 更新道路流光动画（在render loop中调用）
- * @private
- */
-KimapSDK.prototype._updateRoadAnimation = function(time) {
-  if (!this.roadLinesGroup) return;
-
-  this.roadLinesGroup.traverse(function(child) {
-    if (child.userData && child.userData.baseOpacity !== undefined) {
-      var pulse = Math.sin(time * child.userData.speed + child.userData.phase) * 0.3 + 0.5;
-      child.material.opacity = child.userData.baseOpacity * pulse;
-    }
-  });
-};
-
-/**
- * 在渲染循环中添加道路动画更新
- * @private
- */
-KimapSDK.prototype._startRoadAnimationLoop = function() {
-  var self = this;
-  var originalStartRenderLoop = this.startRenderLoop.bind(this);
-
-  this.startRenderLoop = function() {
-    originalStartRenderLoop();
-
-    // 添加道路动画更新
-    var animationLoop = function() {
-      requestAnimationFrame(animationLoop);
-      var time = performance.now() * 0.001;
-      self._updateRoadAnimation(time);
-    };
-    animationLoop();
-  };
 };
 
 /**

package/src/core/SceneCore.js

@@ -258,14 +258,17 @@ SceneCore.prototype._loadMultiFloorMaps = function(OBJLoader, MTLLoader, objUrls
 
   console.log('SceneCore: 开始加载多楼层模型，共', objUrls.length, '个');
 
-  // 依次加载每个楼层模型
-  return objUrls.reduce(function(promise, url) {
-    return promise.then(function() {
-      return self._loadSingleMapWithFloorIndex(OBJLoader, MTLLoader, url, floorIndex++);
+  // 只加载第一个（最低）楼层
+  var lowestUrl = objUrls[0];
+  console.log('SceneCore: 加载最低楼层:', lowestUrl);
+
+  return self._loadSingleMapWithFloorIndex(OBJLoader, MTLLoader, lowestUrl, 0)
+    .then(function() {
+      console.log('SceneCore: 最低楼层模型加载完成');
+      // 保存其他楼层URL供后续切换使用
+      self.pendingFloorUrls = objUrls.slice(1);
+      console.log('SceneCore: 其他楼层已保存，共', self.pendingFloorUrls.length, '个待加载');
     });
-  }, Promise.resolve()).then(function() {
-    console.log('SceneCore: 多楼层模型加载完成，共', self.floorGroups.length, '个楼层');
-  });
 };
 
 /**