cesium-2-entity(包含gltf創(chuàng)建)

這篇具有很好參考價(jià)值的文章主要介紹了cesium-2-entity(包含gltf創(chuàng)建)。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

1、四層結(jié)構(gòu)

viewer --> datasources(DataSourceCollection類型) --> datasource --> entities(EntityCollection類型) --> entity

需要學(xué)習(xí)的方向是：只需要注意每個(gè)層與層之間的關(guān)系和entity實(shí)例如何創(chuàng)建即可

2、DataSourceCollection

增：
add(dataSource) → Promise.<DataSource>
刪：（destroy一般為boolean，指是否需要直接銷毀該datasource）
remove(dataSource, destroy) → boolean
removeAll(destroy)
查：
indexOf(dataSource) → number
getByName(name) → Array.<DataSource>
get(index) → DataSource
contains(dataSource) → boolean
改：
該類型數(shù)據(jù)一般是指向型，直接調(diào)出屬性直接修改即可
改變層級關(guān)系（特殊）：
lower(dataSource)
lowerToBottom(dataSource)
raise(dataSource)
raiseToTop(dataSource)

3、datasource

這是一個(gè)抽象類，有各種實(shí)現(xiàn)方式
cesium-2-entity(包含gltf創(chuàng)建)
一般只會(huì)用到他的三個(gè)屬性：entities、name和show

4、entities(EntityCollection類型)

增：
add(entity) → Entity
getOrCreateEntity(id) → Entity
刪：
removeAll()
removeById(id) → boolean
remove(entity) → boolean
查：
contains(entity) → boolean
getById(id) → Entity|undefined
改：

重要屬性：

id : string
owner : DataSource|CompositeEntityCollection
show : boolean
values : Array.<Entity>  // 全部的entity

5、創(chuàng)建新的entity

一些實(shí)例:
https://www.jianshu.com/p/4250e822c9c8

6、代碼

需要注意的是這里的add()方法得到的是<promise.類型>，后面需要使用.then（成功函數(shù)，失敗函數(shù)）來得到類型
add(dataSource) → Promise.<DataSource>
這種類怎么創(chuàng)建和怎么用見：
https://blog.csdn.net/ABCFF12333/article/details/118188018

  // 注意add()方法得到的是<promise.類型>，后面需要使用.then（成功函數(shù)，失敗函數(shù)）來得到類型
  // 注意這是異步方法
  viewer.dataSources.add(new Cesium.CustomDataSource("pointDataSource1")).then(function(value){
    var pointDataSource = value;
    pointDataSource.show = true;
    var point1 = pointDataSource.entities.add({
      id: "point1",
      name: "point1",
      position: Cesium.Cartesian3.fromDegrees(109, 34, 0),
      point: {
        pixelsize: 10,
        color: Cesium.Color.YELLOW,
        outlineWidth: 2,
        outlineColor: Cesium.Color.RED
      }
    });
    var point2 = pointDataSource.entities.add({
      id: "point2",
      name: "point2",
      position: Cesium.Cartesian3.fromDegrees(110, 35, 0),
      point: {
        pixelsize: 10,
        color: Cesium.Color.YELLOW,
        outlineWidth: 2,
        outlineColor: Cesium.Color.RED
      }
    })
  },function(error){})

  viewer.dataSources.add(new Cesium.CustomDataSource("polygonDatasource")).then(function(value){
    var polygonDatasource = value;
    polygonDatasource.show = true;
    polygonDatasource.entities.add({
      id: "polygon1",
      name: "polygon1",
      polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
          109.080842, 45.002073,
          105.91517, 45.002073,
          104.058488, 44.996596,
          104.053011, 43.002989,
          104.053011, 41.003906,
          105.728954, 40.998429,
          107.919731, 41.003906,
          109.04798, 40.998429,
          111.047063, 40.998429,
          111.047063, 42.000709,
          111.047063, 44.476286,
          111.05254, 45.002073,
          109.080842, 45.002073
        ]),
        height: 10,  // 必須要有高度，否則沒有邊框
        material: Cesium.Color.GREEN,
        outline: true,
        outlineColor: Cesium.Color.RED,
        outlineWidth: 2,
        fill: true
      }
    })
  },function(error){})
})

7、加載gltf

先了解一下heading、pitch、roll
cesium-2-entity(包含gltf創(chuàng)建)
因?yàn)樵紨?shù)據(jù)的x、y、z軸可能與這個(gè)不同，所以當(dāng)修改了pitch沒有發(fā)生俯仰而是看起來是roll發(fā)生了變化，就需要去查看原始數(shù)據(jù)的基準(zhǔn)

gltfDatasource.entities.add({
    id: "model",
    position: position1,
    orientation: Cesium.Transforms.headingPitchRollQuaternion(position1, ori),
    model: {
      uri: "../SampleData/models/CesiumMan/Cesium_Man.glb",
      minimumPixelSize: 32, // 放到最小時(shí)的像素大小
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10, 10000), // 只有相機(jī)與這個(gè)模型在這個(gè)距離區(qū)間才能顯示
      shadows: Cesium.ShadowMode.CAST_ONLY, // 陰影方式
      silhouetteColor: Cesium.Color.RED, // 模型邊框的顏色
      silhouetteSize: 5, //模型邊框的寬度
      colorBlendMode: Cesium.ColorBlendMode.MIX, // 修改模型顏色的方式，3種
      color: Cesium.Color.YELLOW, // 修改模型顏色
    },
    description: "飛機(jī)模型",
  });

混合顏色的模式:
cesium-2-entity(包含gltf創(chuàng)建)
陰影模式：

8、primitive層級

GeometryInstance、Primitive和PolylineGeometry是Cesium中用于創(chuàng)建三維圖元和進(jìn)行渲染的三個(gè)重要概念，它們?nèi)咧g具有如下關(guān)系：

GeometryInstance是包含渲染所需的Geometry和Material信息的對象，描述了三維圖元的幾何形狀、外觀等屬性。

PolylineGeometry是一種Cesium.Geometry類型，用于描述一個(gè)由相鄰的線段組成的折線段。PolylineGeometry本身并不能被直接添加到場景中進(jìn)行顯示，需要通過GeometryInstance包裝后再添加到Primitive中。

Primitive是用于渲染GeometryInstance的對象，它描述了渲染狀態(tài)、材質(zhì)屬性、圖元通道、光源等信息，以決定如何將GeometryInstance渲染出可視化的結(jié)果。Primitive中的geometryInstances屬性通常是一個(gè)GeometryInstance數(shù)組對象，用于包含多個(gè)三維圖元的GeometryInstance信息。

因此，可以簡單地理解為GeometryInstance和PolylineGeometry是兩個(gè)不同的概念，其中PolylineGeometry是一種特定的Geometry類型，而GeometryInstance則是將Geometry、Material和其他屬性打包在一起，用于渲染顯示的對象；Primitive是用于渲染的對象，與GeometryInstance和其包含的Geometry和Material有一定關(guān)聯(lián)，它涵蓋了GeometryInstance的其他狀態(tài)信息，可以包含多個(gè)GeometryInstance進(jìn)行批量渲染。這三者之間可以通過GeometryInstance包裝Geometry實(shí)現(xiàn)關(guān)聯(lián)，但是并不是嚴(yán)格的層級關(guān)系。

加載PointPrimitive

  // 創(chuàng)建點(diǎn)的primitive
  var pointPrimitivateCollection1 = viewer.scene.primitives.add(
    new Cesium.PointPrimitiveCollection({
      modelMatrix: Cesium.Matrix4.IDENTITY,
      debugShowBoundingVolume: false,
      blendOption: Cesium.BlendOption.OPAQUE_AND_TRANSLUCENT,
    })
  );
  for (var x = 0; x < 20; x++) {
    for (var y = 0; y < 20; y++) {
      pointPrimitivateCollection1.add({
        position: Cesium.Cartesian3.fromDegrees(x + 20, y + 20),
        color: Cesium.Color.YELLOW,
      });
    }
  }

加載polygon的primitive文章來源地址http://www.zghlxwxcb.cn/news/detail-428827.html


  // 創(chuàng)建primitiveCollection1
  var primitiveCollection1 = viewer.scene.primitives.add(
    new Cesium.PrimitiveCollection()
  );

  // 創(chuàng)建geo
  var ge = new Cesium.PolygonGeometry({
    // PolygonHierarchy用于描述一個(gè)多邊形的層級結(jié)構(gòu)，
    //它是一個(gè)包含一系列hierarchy屬性的對象，
    //每個(gè)hierarchy屬性都可以是一個(gè)PolygonHierarchy對象，
    //也可以是一個(gè)Cartesian3數(shù)組，用于描述多邊形中的子多邊形或洞穴。
    // PolygonHierarchy的實(shí)例通過遞歸嵌套包含多個(gè)PolygonHierarchy對象，
    // 形成了一個(gè)多層次的層級結(jié)構(gòu)，每一層代表一個(gè)多邊形的封閉區(qū)域和其內(nèi)部的所有子多邊形或洞穴。
    // Cesium在渲染顯示多邊形時(shí)會(huì)利用這些層級信息來正確計(jì)算多邊形的表面法向量，
    // 進(jìn)而展現(xiàn)出多邊形的正確的立體效果。
    polygonHierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray([
        -72.0, 40.0, -70.0, 35.0, -75.0, 30.0, -70.0, 30.0, -68.0, 40.0,
      ])
    ),
  });
  console.log("ge==>" + ge);
  // 創(chuàng)建實(shí)例
  var instance = new Cesium.GeometryInstance({
    geometry: ge,
    id: "polygon",
    //GeometryInstance中的attributes是一個(gè)鍵值對對象
    // 用來存儲(chǔ)用于渲染該GeometryInstance實(shí)例的各種屬性
    // 如顏色、透明度、法向量等信息。
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.YELLOW
      ),
    }, // 輸入樣式的鍵值對的字典
    show: true,
  });
  console.log("instance==>" + instance);

  //primitive的樣式字段
  primitiveCollection1.add(
    new Cesium.Primitive({
      geometryInstances: instance,
      //Cesium中的PolylineColorAppearance是一種primitive的外觀（Appearance
      //用于渲染顏色漸變的線段，和PolylineMaterialAppearance一樣
      //用戶既可以對Cesium自帶的ColorMaterial進(jìn)行使用
      //也可以自定義material達(dá)到自己的效果。
      appearance: new Cesium.MaterialAppearance({
        material: new Cesium.Material({
          // 這是在使用自制的材質(zhì)
          //在Cesium中，當(dāng)我們需要制定一個(gè)自定義的Material對象需要使用fabric庫來解析紋理圖像，
          // 因?yàn)閒abric庫封裝的是瀏覽器支持的所有類型的位圖格式。
          fabric: {
            // 我們創(chuàng)建了一個(gè)材質(zhì)對象，使用fabric庫來實(shí)現(xiàn)顏色紋理，fabric的type屬性指定為“Color”，uniforms表示添加屬性，
            // 使用顏色變量來設(shè)置屬性的值，以制定顏色紋理的樣式和屬性。
            type: "Image",
            uniforms: {
              image: "../img/3.jpg",
              repeat: new Cesium.Cartesian2(10, 10),
            },
          },
        }),
      }),
    })
  );

到了這里，關(guān)于cesium-2-entity(包含gltf創(chuàng)建)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！