@kimap/indoor-positioning-sdk-vue2 4.3.1 → 4.3.2

package/package.json

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

package/src/KimapCore.browser.js

@@ -193,6 +193,90 @@
     return colorMap;
   }
 
+  // 从OBJ内容中提取文本元素
+  function extractTextElementsFromOBJ(objContent) {
+    var textElements = [];
+    var lines = objContent.split('\n');
+    var currentText = null;
+    
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i].trim();
+      
+      if (line.indexOf('# ===== Text Element =====') === 0) {
+        currentText = {};
+      } else if (line.indexOf('# ===== End Text Element =====') === 0 && currentText) {
+        textElements.push(currentText);
+        currentText = null;
+      } else if (currentText) {
+        if (line.indexOf('# TEXT_ID') === 0) {
+          currentText.id = line.split(' ')[2];
+        } else if (line.indexOf('# TEXT_CONTENT') === 0) {
+          currentText.content = line.substring(line.indexOf('TEXT_CONTENT') + 13).trim();
+        } else if (line.indexOf('# TEXT_POSITION') === 0) {
+          var parts = line.split(' ');
+          currentText.points = [{ x: parseFloat(parts[2]), y: parseFloat(parts[3]) }];
+        } else if (line.indexOf('# TEXT_ELEVATION') === 0) {
+          currentText.elevation = parseFloat(line.split(' ')[2]);
+        } else if (line.indexOf('# TEXT_FONT_SIZE') === 0) {
+          currentText.fontSize = parseFloat(line.split(' ')[2]);
+        } else if (line.indexOf('# TEXT_COLOR') === 0) {
+          currentText.color = line.split(' ')[2];
+        } else if (line.indexOf('# TEXT_FONT_FAMILY') === 0) {
+          currentText.fontFamily = line.substring(line.indexOf('TEXT_FONT_FAMILY') + 17).trim();
+        } else if (line.indexOf('# TEXT_BOLD') === 0) {
+          currentText.bold = line.split(' ')[2] === 'true';
+        } else if (line.indexOf('# TEXT_ITALIC') === 0) {
+          currentText.italic = line.split(' ')[2] === 'true';
+        } else if (line.indexOf('# TEXT_BORDER_COLOR') === 0) {
+          currentText.borderColor = line.split(' ')[2];
+        } else if (line.indexOf('# TEXT_BG_COLOR') === 0) {
+          currentText.backgroundColor = line.split(' ')[2];
+        } else if (line.indexOf('# TEXT_BG_OPACITY') === 0) {
+          currentText.backgroundOpacity = parseFloat(line.split(' ')[2]);
+        } else if (line.indexOf('# TEXT_PADDING') === 0) {
+          currentText.padding = parseFloat(line.split(' ')[2]);
+        }
+      }
+    }
+    
+    console.log('[Parsers] 提取到的文本元素:', textElements.length, '个');
+    return textElements;
+  }
+
+  // 从OBJ内容中提取墙体透明度信息
+  function extractWallOpacityFromOBJ(objContent) {
+    var wallOpacity = {};
+    var lines = objContent.split('\n');
+    var currentWallId = null;
+    
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i].trim();
+      
+      if (line.indexOf('o Wall_') === 0) {
+        // 提取墙体ID（格式：Wall_<id>_seg<n>）
+        var match = line.match(/Wall_([^_]+)_seg/);
+        if (match) {
+          currentWallId = match[1];
+        }
+      } else if (currentWallId && line.indexOf('# WALL_OPACITY') === 0) {
+        var opacity = parseFloat(line.split(' ')[2]);
+        if (!wallOpacity[currentWallId]) {
+          wallOpacity[currentWallId] = {};
+        }
+        wallOpacity[currentWallId].opacity = opacity;
+      } else if (currentWallId && line.indexOf('# WALL_COLOR') === 0) {
+        var color = line.split(' ')[2];
+        if (!wallOpacity[currentWallId]) {
+          wallOpacity[currentWallId] = {};
+        }
+        wallOpacity[currentWallId].color = color;
+      }
+    }
+    
+    console.log('[Parsers] 提取到的墙体透明度:', Object.keys(wallOpacity).length, '个墙体');
+    return wallOpacity;
+  }
+
   /**
    * 3D 场景核心
    */
@@ -548,9 +632,28 @@
                   console.log('提取到颜色信息:', colorMap);
                 }
                 
+                // 提取文本元素
+                var textElements = extractTextElementsFromOBJ(objContent);
+                if (textElements && textElements.length > 0) {
+                  console.log('✅ 从OBJ提取到文本元素:', textElements.length, '个');
+                  self._textElements = textElements;
+                }
+                
+                // 提取墙体透明度信息
+                var wallOpacity = extractWallOpacityFromOBJ(objContent);
+                if (wallOpacity && Object.keys(wallOpacity).length > 0) {
+                  console.log('✅ 从OBJ提取到墙体透明度:', Object.keys(wallOpacity).length, '个墙体');
+                  self._wallOpacity = wallOpacity;
+                }
+                
                 var object = objLoader.parse(objContent);
                 self.processModel(object, colorMap);
                 
+                // 渲染文本元素
+                if (self._textElements && self._textElements.length > 0) {
+                  self.renderTextElements(self._textElements);
+                }
+                
                 console.log('=== Kimap模型加载成功 ===');
                 self.logModelInfo();
                 resolve();
@@ -595,6 +698,7 @@
   };
 
   SceneCore.prototype.processModel = function(object, colorMap) {
+    var self = this;
     this.mapModel = object;
     colorMap = colorMap || {};
     
@@ -632,6 +736,16 @@
           } else if (child.material.name.startsWith('Wall_')) {
             roughness = 0.25;
             metalness = 0;
+            
+            // 从OBJ提取的墙体透明度数据中读取
+            if (self._wallOpacity) {
+              var wallId = child.material.name.replace('Wall_', '');
+              if (self._wallOpacity[wallId]) {
+                opacity = self._wallOpacity[wallId].opacity;
+                transparent = opacity < 1.0;
+                console.log('[SceneCore] 应用墙体透明度:', wallId, '=', opacity);
+              }
+            }
           } else if (child.material.name.startsWith('Shape_') || 
                      child.material.name.startsWith('Stair_')) {
             roughness = 0.25;
@@ -869,62 +983,86 @@
     var backgroundOpacity = options.backgroundOpacity !== undefined ? options.backgroundOpacity : 0.8;
     var padding = options.padding || 8;
     
-    // 创建canvas
+    // 创建高分辨率canvas用于文本纹理
     var canvas = document.createElement('canvas');
     var context = canvas.getContext('2d');
     
-    // 设置字体
-    var fontStyle = (italic ? 'italic ' : '') + (bold ? 'bold ' : '') + fontSize + 'px ' + fontFamily;
+    // 使用更大的canvas尺寸以提高清晰度
+    canvas.width = 1024;
+    canvas.height = 512;
+    
+    // 配置字体（放大4倍以提高质量）
+    var scaledFontSize = fontSize * 4;
+    var fontStyle = (italic ? 'italic ' : '') + (bold ? 'bold ' : '') + scaledFontSize + 'px ' + fontFamily;
     context.font = fontStyle;
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
     
-    // 测量文本尺寸
+    // 测量文本
     var metrics = context.measureText(content);
     var textWidth = metrics.width;
-    var textHeight = fontSize * 1.2;
+    var textHeight = scaledFontSize * 1.2;
     
-    // 设置canvas尺寸（需要是2的幂次方以获得更好的性能）
-    var canvasWidth = Math.pow(2, Math.ceil(Math.log2(textWidth + padding * 2)));
-    var canvasHeight = Math.pow(2, Math.ceil(Math.log2(textHeight + padding * 2)));
-    canvas.width = canvasWidth;
-    canvas.height = canvasHeight;
+    // 计算背景尺寸
+    var scaledPadding = padding * 4;
+    var bgWidth = textWidth + scaledPadding * 2;
+    var bgHeight = textHeight + scaledPadding * 2;
     
-    // 重新设置字体（canvas尺寸改变后需要重新设置）
-    context.font = fontStyle;
-    context.textAlign = 'center';
-    context.textBaseline = 'middle';
+    // 计算居中位置
+    var centerX = canvas.width / 2;
+    var centerY = canvas.height / 2;
+    var bgX = centerX - bgWidth / 2;
+    var bgY = centerY - bgHeight / 2;
+    
+    // 绘制阴影效果以增强可读性
+    context.shadowColor = 'rgba(0, 0, 0, 0.5)';
+    context.shadowBlur = 8;
+    context.shadowOffsetX = 2;
+    context.shadowOffsetY = 2;
     
     // 绘制背景
     context.fillStyle = backgroundColor;
-    context.globalAlpha = backgroundOpacity;
-    context.fillRect(0, 0, canvasWidth, canvasHeight);
+    context.globalAlpha = Math.max(backgroundOpacity, 0.9); // 确保背景足够不透明
+    context.fillRect(bgX, bgY, bgWidth, bgHeight);
+    
+    // 重置阴影
+    context.shadowColor = 'transparent';
+    context.shadowBlur = 0;
+    context.shadowOffsetX = 0;
+    context.shadowOffsetY = 0;
     
-    // 绘制边框
+    // 绘制边框（加粗以提高可见性）
     context.strokeStyle = borderColor;
-    context.lineWidth = 2;
+    context.lineWidth = 6;
     context.globalAlpha = 1;
-    context.strokeRect(0, 0, canvasWidth, canvasHeight);
+    context.strokeRect(bgX, bgY, bgWidth, bgHeight);
+    
+    // 绘制文本轮廓以增强对比度
+    context.strokeStyle = color === '#000000' ? '#FFFFFF' : '#000000';
+    context.lineWidth = 2;
+    context.strokeText(content, centerX, centerY);
     
     // 绘制文本
     context.fillStyle = color;
-    context.fillText(content, canvasWidth / 2, canvasHeight / 2);
+    context.fillText(content, centerX, centerY);
     
-    // 创建纹理
+    // 创建纹理和sprite
     var texture = new THREE.Texture(canvas);
     texture.needsUpdate = true;
+    texture.minFilter = THREE.LinearFilter;
+    texture.magFilter = THREE.LinearFilter;
     
-    // 创建精灵材质
-    var spriteMaterial = new THREE.SpriteMaterial({
+    var material = new THREE.SpriteMaterial({ 
       map: texture,
       transparent: true,
       depthTest: true,
       depthWrite: false,
-      sizeAttenuation: true // 启用距离衰减
+      sizeAttenuation: true // 启用距离衰减，使文本大小随距离变化
     });
     
-    // 创建精灵
-    var sprite = new THREE.Sprite(spriteMaterial);
+    var sprite = new THREE.Sprite(material);
     
-    // 使用固定缩放（与编辑器预览一致）
+    // 增大缩放以提高可读性（与编辑器一致）
     var scale = 3;
     sprite.scale.set(scale, scale / 2, 1);
     
@@ -979,6 +1117,13 @@
       var elevationMm = textEl.elevation || 8500; // 默认8500mm（850cm）
       var y = (elevationMm / LOGICAL_WALL_HEIGHT) * RENDER_WALL_HEIGHT;
       
+      console.log('[SceneCore] 渲染文本元素:', {
+        content: textEl.content,
+        elevationMm: elevationMm,
+        calculatedY: y,
+        position: { x: x, y: y, z: z }
+      });
+      
       var sprite = self.createTextSprite({
         content: textEl.content || '',
         fontSize: textEl.fontSize || 16,
@@ -1716,18 +1861,12 @@
           floorCount: kidataObj.floors ? kidataObj.floors.length : 0
         });
         
-        // 解析并渲染文本元素
-        self._parseAndRenderTextElements(kidataObj);
-        
         // 加载3D家具模型
         return self._loadFurnitureModels(kidataObj);
       })
       .then(function(result) {
         console.log('✅ 3D家具模型加载完成:', result);
         
-        // 应用墙面透明度
-        self._applyWallOpacity(self.kidataContent);
-        
         return { success: true, loaded: result.loaded, failed: result.failed };
       })
       .catch(function(error) {
@@ -2405,6 +2544,48 @@
     }
   };
 
+  /**
+   * 从kidata内容加载家具模型（不处理文本和墙体透明度）
+   * @param {string} kidataContent - kidata文件内容（加密或未加密）
+   */
+  KimapSDK.prototype.loadKidataForFurniture = function(kidataContent) {
+    var self = this;
+    
+    try {
+      // 解密kidata文件
+      var decrypted = self._decryptKidata(kidataContent);
+      var kidataObj = JSON.parse(decrypted);
+      
+      // 保存kidata数据供路径规划使用
+      self.kidataContent = kidataObj;
+      
+      // 如果kidata包含楼层数据，设置为projectLayers
+      if (kidataObj.floors && Array.isArray(kidataObj.floors)) {
+        console.log('[KimapSDK] kidata包含楼层数据，楼层数量:', kidataObj.floors.length);
+        if (!self.projectLayers && kidataObj.floors.length > 0) {
+          self.projectLayers = kidataObj.floors[0].layers;
+          console.log('[KimapSDK] 从kidata设置楼层数据，图层数量:', self.projectLayers.length);
+        }
+      }
+      
+      console.log('[KimapSDK] ✅ Kidata文件解密成功:', {
+        version: kidataObj.version,
+        furnitureCount: kidataObj.furnitures ? kidataObj.furnitures.length : 0,
+        floorCount: kidataObj.floors ? kidataObj.floors.length : 0
+      });
+      
+      // 只加载3D家具模型
+      return self._loadFurnitureModels(kidataObj)
+        .then(function(result) {
+          console.log('[KimapSDK] ✅ 3D家具模型加载完成:', result);
+          return { success: true, loaded: result.loaded, failed: result.failed };
+        });
+    } catch (error) {
+      console.error('[KimapSDK] ❌ Kidata加载失败:', error);
+      return Promise.reject(error);
+    }
+  };
+
   KimapSDK.prototype.destroy = function() {
     if (this.animationFrameId) {
       cancelAnimationFrame(this.animationFrameId);

package/src/core/KimapSDK.js

@@ -718,18 +718,12 @@ KimapSDK.prototype.loadKMData = function() {
         floorCount: kidataObj.floors ? kidataObj.floors.length : 0
       });
       
-      // 解析并渲染文本元素
-      self._parseAndRenderTextElements(kidataObj);
-      
       // 加载3D家具模型
       return self._loadFurnitureModels(kidataObj);
     })
     .then(function(result) {
       console.log('✅ 3D家具模型加载完成:', result);
       
-      // 应用墙面透明度
-      self._applyWallOpacity(self.kidataContent);
-      
       return { success: true, loaded: result.loaded, failed: result.failed };
     })
     .catch(function(error) {
@@ -975,107 +969,44 @@ KimapSDK.prototype._loadSingleFurniture = function(furniture, serverUrl) {
 };
 
 /**
- * 解析并渲染文本元素
+ * 从kidata内容加载家具模型（不处理文本和墙体透明度）
+ * @param {string} kidataContent - kidata文件内容（加密或未加密）
  */
-KimapSDK.prototype._parseAndRenderTextElements = function(kidataObj) {
-  var textElements = [];
-  
-  // 从floors中提取文本元素
-  if (kidataObj.floors && Array.isArray(kidataObj.floors)) {
-    kidataObj.floors.forEach(function(floor) {
-      if (floor.layers && Array.isArray(floor.layers)) {
-        floor.layers.forEach(function(layer) {
-          if (layer.elements && Array.isArray(layer.elements)) {
-            layer.elements.forEach(function(element) {
-              if (element.type === 'text' && element.visible !== false) {
-                textElements.push(element);
-              }
-            });
-          }
-        });
-      }
-    });
-  }
-  
-  console.log('[KimapSDK] 找到', textElements.length, '个文本元素');
-  
-  // 调用SceneCore的渲染方法
-  if (textElements.length > 0 && this.core) {
-    this.core.renderTextElements(textElements);
-  }
-};
-
-/**
- * 应用墙面透明度
- */
-KimapSDK.prototype._applyWallOpacity = function(kidataObj) {
-  if (!kidataObj || !kidataObj.floors || !this.core || !this.core.scene) {
-    return;
-  }
-  
-  var wallCount = 0;
+KimapSDK.prototype.loadKidataForFurniture = function(kidataContent) {
   var self = this;
   
-  // 遍历场景中的所有墙体对象
-  this.core.scene.traverse(function(object) {
-    if (object.userData && object.userData.type === 'wall') {
-      var wallId = object.userData.elementId;
-      
-      // 在kidata中查找对应的墙体元素
-      kidataObj.floors.forEach(function(floor) {
-        if (floor.layers && Array.isArray(floor.layers)) {
-          floor.layers.forEach(function(layer) {
-            if (layer.elements && Array.isArray(layer.elements)) {
-              layer.elements.forEach(function(element) {
-                if (element.type === 'wall' && element.id === wallId) {
-                  var opacity = element.opacity !== undefined ? element.opacity : 0.85;
-                  
-                  // 应用透明度到墙体材质
-                  if (object instanceof THREE.Mesh) {
-                    if (Array.isArray(object.material)) {
-                      object.material.forEach(function(mat) {
-                        mat.transparent = opacity < 1;
-                        mat.opacity = opacity;
-                        mat.needsUpdate = true;
-                      });
-                    } else if (object.material) {
-                      object.material.transparent = opacity < 1;
-                      object.material.opacity = opacity;
-                      object.material.needsUpdate = true;
-                    }
-                    wallCount++;
-                  }
-                  
-                  // 如果是Group，遍历其子对象
-                  if (object instanceof THREE.Group) {
-                    object.traverse(function(child) {
-                      if (child instanceof THREE.Mesh) {
-                        if (Array.isArray(child.material)) {
-                          child.material.forEach(function(mat) {
-                            mat.transparent = opacity < 1;
-                            mat.opacity = opacity;
-                            mat.needsUpdate = true;
-                          });
-                        } else if (child.material) {
-                          child.material.transparent = opacity < 1;
-                          child.material.opacity = opacity;
-                          child.material.needsUpdate = true;
-                        }
-                      }
-                    });
-                    wallCount++;
-                  }
-                }
-              });
-            }
-          });
-        }
-      });
+  try {
+    // 解密kidata文件
+    var decrypted = self._decryptKidata(kidataContent);
+    var kidataObj = JSON.parse(decrypted);
+    
+    // 保存kidata数据供路径规划使用
+    self.kidataContent = kidataObj;
+    
+    // 如果kidata包含楼层数据，设置为projectLayers
+    if (kidataObj.floors && Array.isArray(kidataObj.floors)) {
+      console.log('[KimapSDK] kidata包含楼层数据，楼层数量:', kidataObj.floors.length);
+      if (!self.projectLayers && kidataObj.floors.length > 0) {
+        self.projectLayers = kidataObj.floors[0].layers;
+        console.log('[KimapSDK] 从kidata设置楼层数据，图层数量:', self.projectLayers.length);
+      }
     }
-  });
-  
-  if (wallCount > 0) {
-    console.log('[KimapSDK] ✅ 应用墙面透明度完成:', wallCount, '个墙体');
+    
+    console.log('[KimapSDK] ✅ Kidata文件解密成功:', {
+      version: kidataObj.version,
+      furnitureCount: kidataObj.furnitures ? kidataObj.furnitures.length : 0,
+      floorCount: kidataObj.floors ? kidataObj.floors.length : 0
+    });
+    
+    // 只加载3D家具模型
+    return self._loadFurnitureModels(kidataObj)
+      .then(function(result) {
+        console.log('[KimapSDK] ✅ 3D家具模型加载完成:', result);
+        return { success: true, loaded: result.loaded, failed: result.failed };
+      });
+  } catch (error) {
+    console.error('[KimapSDK] ❌ Kidata加载失败:', error);
+    return Promise.reject(error);
   }
 };
 

package/src/core/SceneCore.js

@@ -26,6 +26,8 @@ var decryptTheme = crypto.decryptTheme;
 var extractBorderFromOBJ = parsers.extractBorderFromOBJ;
 var extractMapConfigFromOBJ = parsers.extractMapConfigFromOBJ;
 var extractColorsFromOBJ = parsers.extractColorsFromOBJ;
+var extractTextElementsFromOBJ = parsers.extractTextElementsFromOBJ;
+var extractWallOpacityFromOBJ = parsers.extractWallOpacityFromOBJ;
 
 /**
  * SceneCore 构造函数
@@ -369,12 +371,32 @@ SceneCore.prototype._loadKimapFile = function(kimapUrl, themeUrl, objLoader, mtl
           if (!materials) {
             console.log('[SceneCore] 提取到颜色信息:', colorMap);
           }
+          
+          // 提取文本元素
+          var textElements = extractTextElementsFromOBJ(objContent);
+          if (textElements && textElements.length > 0) {
+            console.log('[SceneCore] ✅ 从OBJ提取到文本元素:', textElements.length, '个');
+            self._textElements = textElements;
+          }
+          
+          // 提取墙体透明度信息
+          var wallOpacity = extractWallOpacityFromOBJ(objContent);
+          if (wallOpacity && Object.keys(wallOpacity).length > 0) {
+            console.log('[SceneCore] ✅ 从OBJ提取到墙体透明度:', Object.keys(wallOpacity).length, '个墙体');
+            self._wallOpacity = wallOpacity;
+          }
         
           // 解析OBJ内容
           var object = objLoader.parse(objContent);
           console.log('[SceneCore] ✓ OBJ解析完成，处理模型...');
           
           self._processLoadedModel(object, materials, colorMap);
+          
+          // 渲染文本元素
+          if (self._textElements && self._textElements.length > 0) {
+            self.renderTextElements(self._textElements);
+          }
+          
           resolve();
         } catch (error) {
           console.error('[SceneCore] ✗ Kimap处理失败:', error.message);
@@ -512,6 +534,8 @@ SceneCore.prototype._processLoadedModel = function(object, materials, colorMap)
  * @private
  */
 SceneCore.prototype._processMaterial = function(child, materials, colorMap) {
+  var self = this;
+  
   if (child.material && child.material.name) {
     // 已有材质，转换为PBR材质
     var mtlColor = child.material.color ? child.material.color.getHex() : 0xdddddd;
@@ -529,6 +553,16 @@ SceneCore.prototype._processMaterial = function(child, materials, colorMap) {
     } else if (child.material.name.startsWith('Wall_')) {
       roughness = 0.25;
       metalness = 0;
+      
+      // 从OBJ提取的墙体透明度数据中读取
+      if (self._wallOpacity) {
+        var wallId = child.material.name.replace('Wall_', '');
+        if (self._wallOpacity[wallId]) {
+          opacity = self._wallOpacity[wallId].opacity;
+          transparent = opacity < 1.0;
+          console.log('[SceneCore] 应用墙体透明度:', wallId, '=', opacity);
+        }
+      }
     } else if (child.material.name.startsWith('Shape_') || child.material.name.startsWith('Stair_')) {
       roughness = 0.25;
       metalness = 0;
@@ -626,62 +660,86 @@ SceneCore.prototype.createTextSprite = function(options) {
   var backgroundOpacity = options.backgroundOpacity !== undefined ? options.backgroundOpacity : 0.8;
   var padding = options.padding || 8;
   
-  // 创建canvas
+  // 创建高分辨率canvas用于文本纹理
   var canvas = document.createElement('canvas');
   var context = canvas.getContext('2d');
   
-  // 设置字体
-  var fontStyle = (italic ? 'italic ' : '') + (bold ? 'bold ' : '') + fontSize + 'px ' + fontFamily;
+  // 使用更大的canvas尺寸以提高清晰度
+  canvas.width = 1024;
+  canvas.height = 512;
+  
+  // 配置字体（放大4倍以提高质量）
+  var scaledFontSize = fontSize * 4;
+  var fontStyle = (italic ? 'italic ' : '') + (bold ? 'bold ' : '') + scaledFontSize + 'px ' + fontFamily;
   context.font = fontStyle;
+  context.textAlign = 'center';
+  context.textBaseline = 'middle';
   
-  // 测量文本尺寸
+  // 测量文本
   var metrics = context.measureText(content);
   var textWidth = metrics.width;
-  var textHeight = fontSize * 1.2;
+  var textHeight = scaledFontSize * 1.2;
   
-  // 设置canvas尺寸（需要是2的幂次方以获得更好的性能）
-  var canvasWidth = Math.pow(2, Math.ceil(Math.log2(textWidth + padding * 2)));
-  var canvasHeight = Math.pow(2, Math.ceil(Math.log2(textHeight + padding * 2)));
-  canvas.width = canvasWidth;
-  canvas.height = canvasHeight;
+  // 计算背景尺寸
+  var scaledPadding = padding * 4;
+  var bgWidth = textWidth + scaledPadding * 2;
+  var bgHeight = textHeight + scaledPadding * 2;
   
-  // 重新设置字体（canvas尺寸改变后需要重新设置）
-  context.font = fontStyle;
-  context.textAlign = 'center';
-  context.textBaseline = 'middle';
+  // 计算居中位置
+  var centerX = canvas.width / 2;
+  var centerY = canvas.height / 2;
+  var bgX = centerX - bgWidth / 2;
+  var bgY = centerY - bgHeight / 2;
+  
+  // 绘制阴影效果以增强可读性
+  context.shadowColor = 'rgba(0, 0, 0, 0.5)';
+  context.shadowBlur = 8;
+  context.shadowOffsetX = 2;
+  context.shadowOffsetY = 2;
   
   // 绘制背景
   context.fillStyle = backgroundColor;
-  context.globalAlpha = backgroundOpacity;
-  context.fillRect(0, 0, canvasWidth, canvasHeight);
+  context.globalAlpha = Math.max(backgroundOpacity, 0.9); // 确保背景足够不透明
+  context.fillRect(bgX, bgY, bgWidth, bgHeight);
   
-  // 绘制边框
+  // 重置阴影
+  context.shadowColor = 'transparent';
+  context.shadowBlur = 0;
+  context.shadowOffsetX = 0;
+  context.shadowOffsetY = 0;
+  
+  // 绘制边框（加粗以提高可见性）
   context.strokeStyle = borderColor;
-  context.lineWidth = 2;
+  context.lineWidth = 6;
   context.globalAlpha = 1;
-  context.strokeRect(0, 0, canvasWidth, canvasHeight);
+  context.strokeRect(bgX, bgY, bgWidth, bgHeight);
+  
+  // 绘制文本轮廓以增强对比度
+  context.strokeStyle = color === '#000000' ? '#FFFFFF' : '#000000';
+  context.lineWidth = 2;
+  context.strokeText(content, centerX, centerY);
   
   // 绘制文本
   context.fillStyle = color;
-  context.fillText(content, canvasWidth / 2, canvasHeight / 2);
+  context.fillText(content, centerX, centerY);
   
-  // 创建纹理
+  // 创建纹理和sprite
   var texture = new THREE.Texture(canvas);
   texture.needsUpdate = true;
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
   
-  // 创建精灵材质
-  var spriteMaterial = new THREE.SpriteMaterial({
+  var material = new THREE.SpriteMaterial({ 
     map: texture,
     transparent: true,
     depthTest: true,
     depthWrite: false,
-    sizeAttenuation: true // 启用距离衰减
+    sizeAttenuation: true // 启用距离衰减，使文本大小随距离变化
   });
   
-  // 创建精灵
-  var sprite = new THREE.Sprite(spriteMaterial);
+  var sprite = new THREE.Sprite(material);
   
-  // 使用固定缩放（与编辑器预览一致）
+  // 增大缩放以提高可读性（与编辑器一致）
   var scale = 3;
   sprite.scale.set(scale, scale / 2, 1);
   
@@ -736,6 +794,13 @@ SceneCore.prototype.renderTextElements = function(textElements) {
     var elevationMm = textEl.elevation || 8500; // 默认8500mm（850cm）
     var y = (elevationMm / LOGICAL_WALL_HEIGHT) * RENDER_WALL_HEIGHT;
     
+    console.log('[SceneCore] 文本元素属性:', {
+      content: textEl.content,
+      backgroundColor: textEl.backgroundColor,
+      borderColor: textEl.borderColor,
+      color: textEl.color
+    });
+    
     var sprite = self.createTextSprite({
       content: textEl.content || '',
       fontSize: textEl.fontSize || 16,
@@ -743,7 +808,7 @@ SceneCore.prototype.renderTextElements = function(textElements) {
       fontFamily: textEl.fontFamily || 'Arial, sans-serif',
       bold: textEl.bold || false,
       italic: textEl.italic || false,
-      borderColor: textEl.borderColor || '#87CEEB',
+      borderColor: textEl.borderColor || '#ADD8E6',
       backgroundColor: textEl.backgroundColor || '#FFFFFF',
       backgroundOpacity: textEl.backgroundOpacity !== undefined ? textEl.backgroundOpacity : 0.8,
       padding: textEl.padding || 8

package/src/core/parsers.js

@@ -114,9 +114,110 @@ function extractCoordinateSystem(config) {
   };
 }
 
+/**
+ * 从OBJ内容中提取文本元素
+ * 格式示例:
+ * # ===== Text Element =====
+ * # TEXT_ID text_123
+ * # TEXT_CONTENT Hello World
+ * # TEXT_POSITION 1000 2000
+ * # TEXT_ELEVATION 8500
+ * # ===== End Text Element =====
+ */
+function extractTextElementsFromOBJ(objContent) {
+  var textElements = [];
+  var lines = objContent.split('\n');
+  var currentText = null;
+  
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i].trim();
+    
+    if (line.indexOf('# ===== Text Element =====') === 0) {
+      currentText = {};
+    } else if (line.indexOf('# ===== End Text Element =====') === 0 && currentText) {
+      textElements.push(currentText);
+      currentText = null;
+    } else if (currentText) {
+      if (line.indexOf('# TEXT_ID') === 0) {
+        currentText.id = line.split(' ')[2];
+      } else if (line.indexOf('# TEXT_CONTENT') === 0) {
+        currentText.content = line.substring(line.indexOf('TEXT_CONTENT') + 13).trim();
+      } else if (line.indexOf('# TEXT_POSITION') === 0) {
+        var parts = line.split(' ');
+        currentText.points = [{ x: parseFloat(parts[2]), y: parseFloat(parts[3]) }];
+      } else if (line.indexOf('# TEXT_ELEVATION') === 0) {
+        currentText.elevation = parseFloat(line.split(' ')[2]);
+      } else if (line.indexOf('# TEXT_FONT_SIZE') === 0) {
+        currentText.fontSize = parseFloat(line.split(' ')[2]);
+      } else if (line.indexOf('# TEXT_COLOR') === 0) {
+        currentText.color = line.split(' ')[2];
+      } else if (line.indexOf('# TEXT_FONT_FAMILY') === 0) {
+        currentText.fontFamily = line.substring(line.indexOf('TEXT_FONT_FAMILY') + 17).trim();
+      } else if (line.indexOf('# TEXT_BOLD') === 0) {
+        currentText.bold = line.split(' ')[2] === 'true';
+      } else if (line.indexOf('# TEXT_ITALIC') === 0) {
+        currentText.italic = line.split(' ')[2] === 'true';
+      } else if (line.indexOf('# TEXT_BORDER_COLOR') === 0) {
+        currentText.borderColor = line.split(' ')[2];
+      } else if (line.indexOf('# TEXT_BG_COLOR') === 0) {
+        currentText.backgroundColor = line.split(' ')[2];
+      } else if (line.indexOf('# TEXT_BG_OPACITY') === 0) {
+        currentText.backgroundOpacity = parseFloat(line.split(' ')[2]);
+      } else if (line.indexOf('# TEXT_PADDING') === 0) {
+        currentText.padding = parseFloat(line.split(' ')[2]);
+      }
+    }
+  }
+  
+  console.log('[Parsers] 提取到的文本元素:', textElements.length, '个');
+  return textElements;
+}
+
+/**
+ * 从OBJ内容中提取墙体透明度信息
+ * 格式示例:
+ * o Wall_wall123_seg0
+ * # WALL_OPACITY 0.85
+ * # WALL_COLOR #d1d5db
+ */
+function extractWallOpacityFromOBJ(objContent) {
+  var wallOpacity = {};
+  var lines = objContent.split('\n');
+  var currentWallId = null;
+  
+  for (var i = 0; i < lines.length; i++) {
+    var line = lines[i].trim();
+    
+    if (line.indexOf('o Wall_') === 0) {
+      // 提取墙体ID（格式：Wall_<id>_seg<n>）
+      var match = line.match(/Wall_([^_]+)_seg/);
+      if (match) {
+        currentWallId = match[1];
+      }
+    } else if (currentWallId && line.indexOf('# WALL_OPACITY') === 0) {
+      var opacity = parseFloat(line.split(' ')[2]);
+      if (!wallOpacity[currentWallId]) {
+        wallOpacity[currentWallId] = {};
+      }
+      wallOpacity[currentWallId].opacity = opacity;
+    } else if (currentWallId && line.indexOf('# WALL_COLOR') === 0) {
+      var color = line.split(' ')[2];
+      if (!wallOpacity[currentWallId]) {
+        wallOpacity[currentWallId] = {};
+      }
+      wallOpacity[currentWallId].color = color;
+    }
+  }
+  
+  console.log('[Parsers] 提取到的墙体透明度:', Object.keys(wallOpacity).length, '个墙体');
+  return wallOpacity;
+}
+
 module.exports = {
   extractBorderFromOBJ: extractBorderFromOBJ,
   extractMapConfigFromOBJ: extractMapConfigFromOBJ,
   extractColorsFromOBJ: extractColorsFromOBJ,
-  extractCoordinateSystem: extractCoordinateSystem
+  extractCoordinateSystem: extractCoordinateSystem,
+  extractTextElementsFromOBJ: extractTextElementsFromOBJ,
+  extractWallOpacityFromOBJ: extractWallOpacityFromOBJ
 };