maptalks.three+threejs建筑物上下扫描效果

最新推荐文章于 2024-11-08 15:19:07 发布

原创

最新推荐文章于 2024-11-08 15:19:07 发布 · 1.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #typescript #vue.js

该文章介绍了如何使用THREE.js库中的MeshPhongMaterial材质结合geometry构建mesh，并通过计算包围盒和重写shaders实现建筑物的上下扫描动画效果。主要步骤包括处理geometry数据、创建材质、组合成mesh、计算包围盒尺寸以及在onBeforeCompile中修改shaders进行动画控制。

主要思路:

geometry数据
THREE.MeshPhongMaterial材质
使用threeLayer将geometry和material 组合成mesh
计算geometry.computeBoundingBox(),获取包围盒的尺寸
使用material.onBeforeCompile函数重写shader
shader实现,根据时间判断当前片原位置与包围盒最上方的关系

1.geometry数据(数据过多,只展示一条)
在这里插入图片描述

const buildings = [
  {
   
   
    "type": "FeatureCollection",
    "features": [
      {
   
   
        "properties" : {
   
   
          "FID" : 0,
          "Id" : 0,
          "Floor" : 8,
          "h" : "28"
        },
        "geometry" : {
   
   
          "type": "Polygon",
            "coordinates" : [
            [
              [
                104.04551999800009,
                30.594714973800023
              ],
              [
                104.04547719400011,
                30.594788921700115
              ],
              [
                104.04559489400009,
                30.59484406170003
              ],
              [
                104.04566980200008,
                30.594723885400015
              ],
              [
                104.04596941700009,
                30.594621694700038
              ],
              [
                104.04612992100004,
                30.594685978100131
              ],
              [
                104.04617272999991,
                30.594538174900038
              ],
              [
                104.04605502500004,
                30.594529192499976
              ],
              [
                104.04605503200014,
                30.594372247600063
              ],
              [
                104.04586242400001,
                30.59437265720004
              ],
              [
                104.04586241699991,
                30.594529602000136
              ],