526互联

cesium 加载3dtiles

发布时间 2023-10-26 18:01:55作者: 小鱼写代码的过往

注意cesium版本问题，还有这个是异步加载，定位到该模型时要加个延时settimeout

效果

 

代码如下

//3dtiles
    function addThreeDTiles(url, option) {
        // 开启地形深度检测:
        // 控制在渲染场景时，相机是否进行深度测试以避免将被遮挡的物体绘制在前景
        // true: 相机会根据地形高度信息进行深度测试，避免将低于地面的物体绘制在地面之上
        viewer.scene.globe.depthTestAgainstTerrain = true

        // ! 写法一：将在 1.107 版本后不支持，options.url和Cesium3DTileset.readyPromise将被移除
        return new Promise(resolve => {
          const tileset = new Cesium.Cesium3DTileset({
            url:url, // 模型切瓦后的瓦片索引文件地址或者Cesium Resource
          })
          tileset.readyPromise.then(() => {
            viewer.scene.primitives.add(tileset)
          })
          resolve(tileset) // 返回模型对象
        })
      }
let tileset = {}
      const modelPromise = addThreeDTiles('http://localhost:8080/test3dtiles/tileset.json') 
      modelPromise.then(tileset2=> {
        //加载到viewer里
        viewer.scene.primitives.add(tileset2);
        tileset =tileset2
        console.log('tileset: ', tileset2)
       
      })
      setTimeout(function(){
        setLight(tileset)
        viewer.zoomTo(
          tileset,
          new Cesium.HeadingPitchRange(
            0.0,
            -0.5,
            tileset.boundingSphere.radius * 2.0 // 模型的包围球半径的2倍
          )
        )
      },1000)    
      // 传入3DTileS对象 设置泛光
             function setLight (tiles) {
                   const shader = `
                         varying vec3 v_positionEC;
                          void main(void){
                            vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
                            float glowRange = 100.0; // 光环的移动范围(高度)
                            gl_FragColor = vec4(0.0, 0.3, 0.8, 0.8); // 颜色1
                           //  gl_FragColor = vec4(220.0, 0.3, 0.8, 0.8); // 颜色2
                            // 低于10米的楼不显示渐变色
                             if(position.z < 10.0) {
                              gl_FragColor *= vec4(vec3(position.z / 10.0 * 2.0), 1.0);
                            }else{
                              gl_FragColor *= vec4(vec3(position.z / 10.0), 0.8); // 渐变
                            }
                            // 设置动态光环
                            float time = fract(czm_frameNumber / 360.0);
                            time = abs(time - 0.5) * 1.0;
                            float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
                            gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
                          }
                          `;

                   tiles.tileVisible.addEventListener(function (tile) {
                     const content = tile.content
                     const featuresLength = content.featuresLength
                     let feature
                     for (var i = 0; i < featuresLength; i += 2) {
                       feature = content.getFeature(i)
                       const _model = feature.content._model
                       _model._shouldRegenerateShaders = true
                       Object.getOwnPropertyNames(_model._sourcePrograms).forEach(function (j) {
                         const _modelSourceP = _model._sourcePrograms[0]
                         _model._rendererResources.sourceShaders[_modelSourceP.fragmentShader] = shader
                   if(_model._sourcePrograms[1] != undefined){
                    const _modelSourceP1 = _model._sourcePrograms[1]
                         _model._rendererResources.sourceShaders[_modelSourceP1.fragmentShader] = shader
                   }
                         
                       })
                       _model._shouldRegenerateShaders = true
                     }
                   })
                 }