先聊聊网格渲染的痛点，别拽着不放

说实话，三维城镇地图里那几万座楼，光是渲染就Neng把帧率逼到低谷。

我之前也踩过坑，卡得像老牛拖车——那种“哎呀妈呀，我的鼠标还Neng动吗”的感觉。

哈哈，你要是还在用Raycaster逐个检测，那真是给自己挖了个坑。

不过别慌，咱们今天就来掰扯掰扯怎么把渲染和拾取dou提速到让你爽到飞起。

一、合并几何体——先把Draw Call砍掉

先说Zui容易实现的招：把相邻的建筑几何体用mergeBufferGeometries合并。

合并后一个Mesh里装上千座楼，这样GPU只需要一次draw call。

对，你没听错，就是这么粗暴。

不过合并会让每栋楼失去独立的.material，所以我们得想办法保留“单体”信息——颜色编码拾取登场！

二、颜色编码拾取——离屏渲染的秘密武器

核心思路：给每栋楼分配一个唯一ID，然后把这个ID映射成RGB颜色，渲染进一张kan不见的离屏纹理。

鼠标点哪儿，就读那张纹理对应像素的RGB，再逆向算回ID——Boom！瞬间定位到哪栋楼被点了。

/** 
 * 整数 → RGB数组 
 * @param {Number} number ID 
 * @returns {}  
 */ 
intToRgb { 
  const validBits = number & 0xffffff; // 只保留低24位 
  const r =  & 0xff; 
  const g =  & 0xff; 
  const b = validBits & 0xff; 
  return ; 
} 
/** 
 * RGB → 整数 
 */ 
rgbToInt { 
  if ) throw new Error; 
  return ||b; 
}

这段代码就是把ID和颜色互转的钥匙，记住它。

三、构造拾取场景——别忘了同步geng新

我们要搞两个场景：

可视场景: 真正展示给用户kan的模型，使用真实材质。

拾取场景: 用纯色渲染，同样的几何体但材质是{vertexColors:true}。

每次相机或视角变化后dou要重新渲染一次离屏纹理，否则读像素会跑偏。

/** geng新离屏纹理 */ 
updatePickingTexture { 
  if  return; 
  const pixelRatio = this.renderer.getPixelRatio; 
  this._pickingTexture.setSize(
    this.container.clientWidth * pixelRatio,
    this.container.clientHeight * pixelRatio
  ); 
  const curTarget = this.renderer.getRenderTarget; 
  this.renderer.setRenderTarget; 
  this.renderer.clear; 
  this.renderer.render; 
  this.renderer.setRenderTarget; 
  this._pickingTextureNeedsUpdate = false; 
}

四、点击/悬停事件——从像素到建筑，一气呵成

下面这段代码负责读取鼠标所在位置的像素，并转成建筑ID。这里用了.readRenderTargetPixels。

/** 拾取建筑 */ 
pickBuilding { 
  if  return null; 
  if  this.updatePickingTexture; 
  const pixelRatio = this.renderer.getPixelRatio; 
  const x = event.clientX * pixelRatio; 
  const y = this._pickingTexture.height - event.clientY * pixelRatio - 1; 
  const pixelBuffer = new Uint8Array; // RGBA 四通道  
  this.renderer.readRenderTargetPixels(
    this._pickingTexture,
    x,
    y,
    1,
   1,
    pixelBuffer
   ); 
   const id = rgbToInt; 
   if  { // 没有命中任何建筑
     if {  
        this.highlightBuilding;  
        this._lastPickedBuilding=null;
     }  
     return null;
   }  
   const buildingData = this._buildingIdMap.get;  
   if ){
      this.highlightBuilding;
      this._lastPickedBuilding={id,data:buildingData};
   }  
   return buildingData;
}

五、高亮盒子—给用户一个“我被选中了”的视觉反馈

C++里叫Bounding Box，这里我们直接用Three.js的.BoxGeometry，再根据建筑外形算出Zui小矩形底面把盒子拉伸到对应高度。

/** 高亮建筑 */  
highlightBuilding{  
   if{  
      if this._highlightBox.visible=false;  
      return;
   }  
   const {coordinates,type}=buildingData;
   const height=buildingData.height||this._defaultHeight;
   let minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;
   let points=;
   if{ points=coordinates; }
   else if{ points=coordinates; }
   points.forEach=>{  
      minX=Math.min; minY=Math.min;
      maxX=Math.max; maxY=Math.max;
   });
   const centerX=/2;
   const centerY=/2;
   const centerZ=height/2;
   const sizeX=maxX-minX;
   const sizeY=maxY-minY;
   const sizeZ=height;
   this._highlightBox.position.set;
   this._highlightBox.scale.set;
   this._highlightBox.visible=true;
}

*不对不对*，刚才漏写了.visible=true;, 好险差点忘了显示高亮盒子呢！哈哈。

六、完整流程回顾——从数据到交互全链路敲敲kan

数据准备：GeoJSON里每个Featuredou有唯一ID，同时记录坐标和高度属性。

Create Geometry： 遍历所有Feature，用THREE.ExtrudeGeometry生成立体模型；同时为每个顶点写入颜色属性。

Merging： 把所有几何体收进数组，用mergeBufferGeometries`一次性生成两套Mesh：可视Mesh + 拾取Mesh。

Add to Scenes： 可视Mesh放进主场景；拾取Mesh放进离屏场景；高亮盒子也挂在主场景。

Packing Pick Texture： 相机变化或数据geng新时调用.updatePickingTexture, 把离屏场景渲染进RTT。

User Interaction： 监听鼠标move/click → 调用.pickBuilding → 根据返回结果控制光标样式、派发业务事件、调用.highlightBuilding。

七、常见坑点 & 小技巧

- **颜色冲突**：Ru果建筑数量超过16M，RGB会溢出。实际项目里基本不会碰到，但要留意上限。

- **透明度**：高亮盒子建议设{depthTest:false, depthWrite:false}, 不然遮挡会出现奇怪的闪烁。

- **性Neng监控**：打开Chrome DevTools 的 Performance，kan一下离屏渲染占多少ms，一般保持在5-10ms以内才算舒服。

- **刷新频率**：不要每帧dou强制geng新离屏纹理，只在相机或数据变动时标记 true.

八、——让你的城市地图飞起来！🚀

AFAIK，现在市面上大多数三维 GIS 产品dou是这样玩儿的：合并几何 + 色彩编码拾取，两手抓齐，全程秒杀上万对象交互延迟。

#说实话# 我自己用了半年，帧率从30掉到了70+，而且点击响应时间直接降到了毫秒级。

*害*，Ru果你还有别的需求，比如边缘高光、动态贴图之类，Ke以再基于这套框架Zuo二次开发，完全没问题。

咱就是说，技术不是死板公式，一旦弄懂原理，你就Neng随心所欲地玩出花样来。以后再遇到卡顿，就想想这套方案吧，好好调教你的GPU，让它喝口咖啡继续跑起来！哈哈哈~

---