@kimap/indoor-positioning-sdk-vue2 5.8.2 → 5.8.4

package/package.json

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

package/src/core/KimapSDK.js

@@ -43,6 +43,7 @@ function KimapSDK(config) {
   this.floorToolsConfig = config.floorTools || { enabled: false };
   this.floorToolsElement = null;
   this.currentFloorIndex = 1; // 1=第一个楼层, 0=ALL
+  this._currentShowingFloorIndex = 0; // 当前显示的楼层索引（用于判断动画方向）
 }
 
 /**
@@ -143,23 +144,31 @@ KimapSDK.prototype.handleClick = function(event) {
  */
 KimapSDK.prototype.startRenderLoop = function() {
   var self = this;
-  
+  var lastTime = Date.now();
+
   function animate() {
     self.animationFrameId = requestAnimationFrame(animate);
-    
+
+    var now = Date.now();
+    var deltaMs = now - lastTime;
+    lastTime = now;
+
+    // 驱动楼层切换动画 & 相机俯仰动画
+    self.core.tickAnimations(deltaMs);
+
     if (self.core.controls) {
       self.core.controls.update();
     }
-    
+
     if (self.trackingModule) {
       self.trackingModule.update();
     }
-    
+
     self.updateAllDOMPositions();
-    
+
     self.core.renderer.render(self.core.scene, self.core.camera);
   }
-  
+
   animate();
 };
 
@@ -606,18 +615,70 @@ KimapSDK.prototype.changeFloor = function(floorIdOrIndex) {
 KimapSDK.prototype.showSingleFloor = function(floorIndex) {
   if (!this.floorGroups || this.floorGroups.length === 0) return;
   var self = this;
+
+  var ANIM_DURATION = 400; // ms
+  var startTime = Date.now();
+  var currentFloorIndex = this._currentShowingFloorIndex !== undefined
+    ? this._currentShowingFloorIndex : 0;
+
+  // 判断方向：目标层是从上方滑下（低→高）还是从下方滑上（高→低）
+  // 低楼层 → 高楼层（1→2）：目标层从上方来
+  // 高楼层 → 低楼层（2→1）：目标层从下方来
+  var targetFromAbove = floorIndex > currentFloorIndex;
+
+  // 计算目标 Y
+  function targetY(index) {
+    if (index === floorIndex) return 0;
+    var origY = self.core.floorOriginalY[index] || 0;
+    return -origY - 1;
+  }
+
+  // 滑入起始偏移：目标层从 ±(楼层高度+内容高度) 处开始
+  var slideOffset = 8; // 一个楼层的视觉高度约 8 单位
+  function slideStartY(index) {
+    return targetFromAbove ? slideOffset : -slideOffset;
+  }
+
+  var steps = [];
   this.floorGroups.forEach(function(group, index) {
     if (index === floorIndex) {
-      // 单层模式：将该楼层移动到贴地位置（y = 0）
+      // 目标层：先设 visible，再从滑入起始位开始动画到 y=0
       group.visible = true;
-      group.position.y = 0;
+      group.position.y = slideStartY(index);
+      steps.push({ group: group, fromY: slideStartY(index), toY: 0, toVisible: true });
     } else {
-      // 隐藏其他楼层，同时移到下方避免干扰
-      group.visible = false;
-      var originalY = self.core.floorOriginalY[index] || 0;
-      group.position.y = -originalY - 1; // 移到地面以下
+      // 离场层：动画到隐藏位置后设 visible=false
+      var fromY = group.position.y;
+      var toY = targetY(index);
+      steps.push({ group: group, fromY: fromY, toY: toY, toVisible: false });
     }
   });
+
+  // 合并/覆盖已有动画：先停止当前帧再以新起止值启动
+  if (self.core.floorAnim && self.core.floorAnim.running) {
+    var cur = self.core.floorAnim;
+    var t = Math.min((Date.now() - cur.startTime) / cur.duration, 1);
+    var et = 1 - Math.pow(1 - t, 3); // easeOutCubic reverse
+    // 把每个 group 瞬移到当前动画帧的位置
+    for (var i = 0; i < cur.steps.length; i++) {
+      var cs = cur.steps[i];
+      cs.group.position.y = cs.fromY + (cs.toY - cs.fromY) * et;
+    }
+  }
+
+  self.core.floorAnim = {
+    running: true,
+    startTime: startTime,
+    duration: ANIM_DURATION,
+    steps: steps
+  };
+
+  this._currentShowingFloorIndex = floorIndex;
+  // 相机对准当前楼层（带相机俯仰动画）
+  if (self.core.cameraPitchState === 1) {
+    self.core.animateCameraToFloorView(600);
+  }
+  self.core.adjustCameraToFloor(floorIndex);
 };
 
 /**
@@ -627,12 +688,21 @@ KimapSDK.prototype.showSingleFloor = function(floorIndex) {
 KimapSDK.prototype.showAllFloors = function() {
   if (!this.floorGroups || this.floorGroups.length === 0) return;
   var self = this;
+
+  // 楼层组瞬间恢复到 ALL 位置（不需要动画，因为相机视角切换是主角）
   this.floorGroups.forEach(function(group, index) {
     group.visible = true;
-    // 恢复原始世界 Y 偏移（含间隙）
     var originalY = self.core.floorOriginalY[index] || 0;
     group.position.y = originalY;
   });
+
+  // 先让相机以所有楼层合并包围盒调整一次（决定 toPos/toTarget）
+  self.core._adjustCameraToAllFloors();
+
+  // 再启动相机俯仰动画（从当前单楼层视角 → -60° 外景视角）
+  self.core.animateCameraToAllView(800);
+
+  this._currentShowingFloorIndex = -1; // ALL 状态
 };
 
 /**
@@ -1505,13 +1575,13 @@ KimapSDK.prototype._renderFloorSelector = function() {
   ].join(';');
 
   // ALL 按钮
-  var allBtn = this._createFloorButton('ALL', 0, this.currentFloorIndex === 0);
+  var allBtn = this._createFloorButton('ALL', 0);
   selector.appendChild(allBtn);
 
   // 各楼层按钮
   var self2 = this;
   floorNames.forEach(function(name, index) {
-    var btn = self2._createFloorButton(name, index + 1, self2.currentFloorIndex === index + 1);
+    var btn = self2._createFloorButton(name, index + 1);
     selector.appendChild(btn);
   });
 
@@ -1523,7 +1593,7 @@ KimapSDK.prototype._renderFloorSelector = function() {
  * 创建楼层按钮
  * @private
  */
-KimapSDK.prototype._createFloorButton = function(name, index, isActive) {
+KimapSDK.prototype._createFloorButton = function(name, index) {
   var self = this;
   var btn = document.createElement('button');
   btn.textContent = name;
@@ -1540,27 +1610,32 @@ KimapSDK.prototype._createFloorButton = function(name, index, isActive) {
     'min-width: 50px'
   ].join(';');
 
-  if (isActive) {
-    btn.style.backgroundColor = '#1890ff';
-    btn.style.color = '#fff';
-  } else {
-    btn.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
-    btn.style.color = '#333';
-    btn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.1)';
+  function applyActiveStyle(active) {
+    if (active) {
+      btn.style.backgroundColor = '#1890ff';
+      btn.style.color = '#fff';
+      btn.style.boxShadow = 'none';
+    } else {
+      btn.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
+      btn.style.color = '#333';
+      btn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.1)';
+    }
   }
 
+  applyActiveStyle(self.currentFloorIndex === index);
+
   btn.addEventListener('click', function() {
     self._onFloorButtonClick(index);
   });
 
   btn.addEventListener('mouseenter', function() {
-    if (!isActive) {
+    if (self.currentFloorIndex !== index) {
       btn.style.backgroundColor = '#e6f7ff';
     }
   });
 
   btn.addEventListener('mouseleave', function() {
-    if (!isActive) {
+    if (self.currentFloorIndex !== index) {
       btn.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
     }
   });

package/src/core/SceneCore.js

@@ -42,6 +42,7 @@ function SceneCore(config) {
   this.renderer = null;
   this.controls = null;
   this.mapModel = null;
+  this.lookAtTarget = null; // 当前相机注视点（ALL 退场恢复用）
   
   // 需要先加载 THREE 才能使用 THREE.Vector3
   var mapWidth = config.maxX || 100;
@@ -67,6 +68,13 @@ function SceneCore(config) {
   this.floorHeight = 3; // 米
   this.isMultiFloor = Array.isArray(config.objUrl);
   this.floorOriginalY = []; // 每个楼层的原始世界Y偏移（含间隙）
+  // 楼层切换动画状态
+  this.floorAnim = null; // { running: bool, startTime: ms, duration: ms, queue: [] }
+  // 相机俯仰动画（ALL 模式）
+  this.cameraPitchAnim = null; // { running: bool, startTime: ms, duration: ms }
+  this.cameraPitchState = 0; // 0=正常视角, 1=ALL外景俯视
+  this.cameraPrePitchPos = null; // 俯仰动画前的相机位置
+  this.cameraPrePitchTarget = null; // 俯仰动画前的 controls.target
 }
 
 /**
@@ -282,8 +290,9 @@ SceneCore.prototype._loadMultiFloorMaps = function(OBJLoader, MTLLoader, objUrls
       return self._loadSingleMapWithFloorIndex(OBJLoader, MTLLoader, url, floorIndex++);
     });
   }, Promise.resolve()).then(function() {
-    if (self.floorGroups.length > 1) {
-      self._adjustCameraToAllFloors();
+    // 多楼层：相机默认以第一个楼层为准（之后切换 ALL 时再重新调整）
+    if (self.floorGroups.length > 0) {
+      self.adjustCameraToFloor(0);
     }
   });
 };
@@ -421,7 +430,8 @@ SceneCore.prototype._processLoadedModelToGroup = function(object, materials, col
   var box = new THREE.Box3().setFromObject(object);
   var boxHeight = box.max.y - box.min.y;
 
-  // 逐层累积高度：计算该楼层在 ALL 模式下的世界 Y 偏移
+  // 逐层累积高度：ALL 模式时，每层 = 前几层高度 + floorHeight 间隙
+  // 这样 ALL 有间隙，单层模式时把 group.position.y = -floorY 就贴地了
   var floorY = 0;
   for (var i = 0; i < floorIndex; i++) {
     var prevGroup = self.floorGroups[i];
@@ -431,14 +441,17 @@ SceneCore.prototype._processLoadedModelToGroup = function(object, materials, col
     }
   }
 
+  // 加固定间隙高度（除第一个楼层外）
+  var totalFloorY = floorY + floorIndex * self.floorHeight;
+
   // 所有楼层的 object 底部（box.min.y）对齐到本地 Y=0，统一基准
   object.position.set(-box.min.x, -box.min.y, -box.min.z);
 
-  // ALL 模式时 floorGroup.position.y 持有累积偏移（含间隙）
-  floorGroup.position.y = floorY;
+  // ALL 模式时 floorGroup.position.y 持有含间隙的累积偏移
+  floorGroup.position.y = totalFloorY;
 
-  // 记录每个楼层的原始世界 Y 偏移（单层模式时用于将选中层拽回 Y=0）
-  self.floorOriginalY[floorIndex] = floorY;
+  // 记录含间隙的总世界 Y 偏移（单层模式 showSingleFloor 用 group.y = -originalY 拽回 Y=0）
+  self.floorOriginalY[floorIndex] = totalFloorY;
 
   // 为该楼层创建独立的文字组
   var textGroup = new THREE.Group();
@@ -495,6 +508,48 @@ SceneCore.prototype._adjustCameraToAllFloors = function() {
   }
 };
 
+/**
+ * 相机对准指定楼层（多楼层切换/ALL 时分别调用）
+ * @param {number} floorIndex - 楼层索引
+ * @public
+ */
+SceneCore.prototype.adjustCameraToFloor = function(floorIndex) {
+  try {
+    var floorGroup = this.floorGroups[floorIndex];
+    if (!floorGroup) return;
+
+    var meshes = [];
+    floorGroup.traverse(function(child) {
+      if (child.isMesh) meshes.push(child);
+    });
+    if (meshes.length === 0) return;
+
+    var box = new THREE.Box3();
+    meshes.forEach(function(mesh) { box.expandByObject(mesh); });
+
+    var center = new THREE.Vector3();
+    var size = new THREE.Vector3();
+    box.getCenter(center);
+    box.getSize(size);
+    var maxSize = Math.max(size.x, size.z);
+    var distance = maxSize * 2;
+
+    this.camera.position.set(center.x, center.y + distance * 1.5, center.z + distance);
+    var lookAtTgt = new THREE.Vector3(center.x, center.y, center.z);
+    this.camera.lookAt(lookAtTgt);
+    if (this.controls) {
+      this.controls.target.copy(lookAtTgt);
+      this.controls.update();
+    }
+    // 记录当前 lookAt 目标（ALL 退场恢复用）
+    this.camera.lookAtTarget = lookAtTgt;
+    this.coordinateSystem.maxX = size.x;
+    this.coordinateSystem.maxY = size.z;
+  } catch (e) {
+    console.warn('调整相机到楼层 ' + floorIndex + ' 失败:', e);
+  }
+};
+
 /**
  * 加载 Kimap 加密文件（内部方法）
  * @private
@@ -1158,4 +1213,194 @@ SceneCore.prototype.destroy = function() {
   }
 };
 
+// =============================================================================
+// 动画工具：缓动函数
+// =============================================================================
+function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }
+function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }
+
+/**
+ * 每帧调用：驱动楼层切换动画 & 相机俯仰动画
+ * 由 KimapSDK.renderLoop 内部调用
+ * @param {number} deltaMs - 距上一帧的毫秒数
+ */
+SceneCore.prototype.tickAnimations = function(deltaMs) {
+  // ---------- 楼层切换动画 ----------
+  if (this.floorAnim && this.floorAnim.running) {
+    var elapsed = Date.now() - this.floorAnim.startTime;
+    var t = Math.min(elapsed / this.floorAnim.duration, 1);
+    var et = easeOutCubic(t);
+
+    var steps = this.floorAnim.steps;
+    for (var i = 0; i < steps.length; i++) {
+      var step = steps[i];
+      var fromY = step.fromY;
+      var toY = step.toY;
+      step.group.position.y = fromY + (toY - fromY) * et;
+    }
+
+    if (t >= 1) {
+      // 动画结束：立即到达目标，更新最终状态
+      for (var j = 0; j < steps.length; j++) {
+        var s = steps[j];
+        s.group.position.y = s.toY;
+        if (s.toVisible === false) {
+          s.group.visible = false;
+        }
+      }
+      this.floorAnim = null;
+    }
+  }
+
+  // ---------- 相机俯仰动画（ALL 外景） ----------
+  if (this.cameraPitchAnim && this.cameraPitchAnim.running) {
+    var elapsed2 = Date.now() - this.cameraPitchAnim.startTime;
+    var t2 = Math.min(elapsed2 / this.cameraPitchAnim.duration, 1);
+    var et2 = easeInOutCubic(t2);
+
+    var fromPos = this.cameraPitchAnim.fromPos;
+    var toPos = this.cameraPitchAnim.toPos;
+    var fromTarget = this.cameraPitchAnim.fromTarget;
+    var toTarget = this.cameraPitchAnim.toTarget;
+
+    this.camera.position.lerpVectors(fromPos, toPos, et2);
+    this.camera.lookAt(
+      fromTarget.x + (toTarget.x - fromTarget.x) * et2,
+      fromTarget.y + (toTarget.y - fromTarget.y) * et2,
+      fromTarget.z + (toTarget.z - fromTarget.z) * et2
+    );
+    if (this.controls) {
+      this.controls.target.copy(this.camera);
+      this.controls.target.y = fromTarget.y + (toTarget.y - fromTarget.y) * et2;
+      this.controls.update();
+    }
+
+    if (t2 >= 1) {
+      this.camera.position.copy(toPos);
+      this.camera.lookAt(toTarget);
+      if (this.controls) {
+        this.controls.target.copy(toTarget);
+        this.controls.update();
+      }
+      this.cameraPitchAnim = null;
+    }
+  }
+};
+
+/**
+ * 计算整栋建筑的包围盒中心（ALL 相机动画用）
+ * @returns {{center: THREE.Vector3, maxSize: number}}
+ */
+SceneCore.prototype._getBuildingBounds = function() {
+  var allMeshes = [];
+  this.floorGroups.forEach(function(group) {
+    group.traverse(function(child) {
+      if (child.isMesh) allMeshes.push(child);
+    });
+  });
+  if (allMeshes.length === 0) return null;
+
+  var box = new THREE.Box3();
+  allMeshes.forEach(function(mesh) { box.expandByObject(mesh); });
+  var center = new THREE.Vector3();
+  var size = new THREE.Vector3();
+  box.getCenter(center);
+  box.getSize(size);
+  return { center: center, maxSize: Math.max(size.x, size.z) };
+};
+
+/**
+ * ALL 入口：相机降至低俯角（-60°），模拟建筑外观视角
+ * @param {number} duration - 动画时长（ms）
+ */
+SceneCore.prototype.animateCameraToAllView = function(duration) {
+  duration = duration || 800;
+  var self = this;
+
+  // 已有动画在跑 → 停止，先瞬移到当前帧再启动新动画
+  if (this.cameraPitchAnim && this.cameraPitchAnim.running) {
+    var cur = this.cameraPitchAnim;
+    var tCur = Math.min((Date.now() - cur.startTime) / cur.duration, 1);
+    var etCur = easeInOutCubic(tCur);
+    this.camera.position.lerpVectors(cur.fromPos, cur.toPos, etCur);
+    this.camera.lookAt(
+      cur.fromTarget.x + (cur.toTarget.x - cur.fromTarget.x) * etCur,
+      cur.fromTarget.y + (cur.toTarget.y - cur.fromTarget.y) * etCur,
+      cur.fromTarget.z + (cur.toTarget.z - cur.fromTarget.z) * etCur
+    );
+    if (this.controls) this.controls.update();
+    this.cameraPitchAnim = null;
+  }
+
+  var bounds = this._getBuildingBounds();
+  if (!bounds) return;
+
+  var center = bounds.center;
+  var maxSize = bounds.maxSize;
+
+  // 保存退场时需恢复的位置（单楼层相机视角）
+  this.cameraPrePitchPos = this.camera.position.clone();
+  this.cameraPrePitchTarget = this.controls ? this.controls.target.clone() : center.clone();
+
+  // 低俯角 -60°：camera.y - center.y = distance × sin(-60°) = -distance × 0.866
+  // camera.z - center.z = distance × cos(-60°) = distance × 0.5
+  var dist = maxSize * 2.5;
+  var fromPos = this.camera.position.clone();
+  var fromTarget = this.controls ? this.controls.target.clone() : center.clone();
+  var toPos = new THREE.Vector3(center.x, center.y - dist * 0.866, center.z + dist * 0.5);
+  var toTarget = new THREE.Vector3(center.x, center.y, center.z);
+
+  this.cameraPitchAnim = {
+    running: true,
+    startTime: Date.now(),
+    duration: duration,
+    fromPos: fromPos,
+    toPos: toPos,
+    fromTarget: fromTarget,
+    toTarget: toTarget
+  };
+  this.cameraPitchState = 1;
+};
+
+/**
+ * ALL 出口：相机从外景视角恢复到单楼层视角
+ * @param {number} duration - 动画时长（ms）
+ */
+SceneCore.prototype.animateCameraToFloorView = function(duration) {
+  duration = duration || 800;
+  var self = this;
+
+  // 先停止当前相机动画并瞬移到当前帧
+  if (this.cameraPitchAnim && this.cameraPitchAnim.running) {
+    var cur = this.cameraPitchAnim;
+    var tCur = Math.min((Date.now() - cur.startTime) / cur.duration, 1);
+    var etCur = easeInOutCubic(tCur);
+    this.camera.position.lerpVectors(cur.fromPos, cur.toPos, etCur);
+    this.camera.lookAt(
+      cur.fromTarget.x + (cur.toTarget.x - cur.fromTarget.x) * etCur,
+      cur.fromTarget.y + (cur.toTarget.y - cur.fromTarget.y) * etCur,
+      cur.fromTarget.z + (cur.toTarget.z - cur.fromTarget.z) * etCur
+    );
+    if (this.controls) this.controls.update();
+    this.cameraPitchAnim = null;
+  }
+
+  // 退场恢复点
+  var toPos = this.cameraPrePitchPos || this.camera.position.clone();
+  var toTarget = this.cameraPrePitchTarget || this.camera.position.clone();
+
+  this.cameraPitchAnim = {
+    running: true,
+    startTime: Date.now(),
+    duration: duration,
+    fromPos: this.camera.position.clone(),
+    toPos: toPos,
+    fromTarget: this.camera.lookAtTarget ? this.camera.lookAtTarget.clone() : toTarget.clone(),
+    toTarget: toTarget
+  };
+  this.cameraPitchState = 0;
+  this.cameraPrePitchPos = null;
+  this.cameraPrePitchTarget = null;
+};
+
 module.exports = SceneCore;