Cesium快速上手7-3dtiles加载

3dtiles的加载

http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20Photogrammetry.html&label=3D%20Tiles

image.png

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

var tileset = new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(40866)
});

viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);

3dtiles的拾取

http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20BIM.html&label=3D%20Tiles

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(movement) {
    if (!picking) {
        return;
    }

    var feature = scene.pick(movement.endPosition);

    unselectFeature(selectedFeature);

    if (feature instanceof Cesium.Cesium3DTileFeature) {
        selectFeature(feature);
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

666
http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20Feature%20Picking.html&label=3D%20Tiles

image.png image.png

3dtiles的裁切

http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20Clipping%20Planes.html&label=3D%20Tiles

image.png

Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), 0.0) 原点在3DTILES模型的中心
好几个3dtiles叠在一起，每个有各自的原点，若用一个Cesium.ClippingPlane去切，三个3dtiles切的都不一样。

3dtiles inspector

http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20Formats.html&label=3D%20Tiles

image.png

http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20Inspector.html&label=3D%20Tiles

image.png 渲染速度，每帧消耗时间

表示渲染速度，每帧消耗时间

3dtiles的style控制 Cesium.Cesium3DTileStyle

http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20Feature%20Styling.html&label=3D%20Tiles

image.png
image.png

块和属性的关系

ClassificationPrimitive

http://localhost:8080/Apps/Sandcastle/index.html?src=Classification.html&label=3D%20Tiles

image.png

关键代码
Cesium.ClassificationPrimitive
classificationType : Cesium.ClassificationType.CESIUM_3D_TILE

var buildingHighlight = scene.primitives.add(new Cesium.ClassificationPrimitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : Cesium.BoxGeometry.fromDimensions({
            vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
            dimensions : new Cesium.Cartesian3(8.0, 5.0, 8.0)
        }),
        modelMatrix : modelMatrix,
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5)),
            show : new Cesium.ShowGeometryInstanceAttribute(true)
        },
        id : 'volume'
    }),
    classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
}));

立方体盒子

更改立方体盒子的属性，更改盒子里面的3DTILES属性信息
http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20Photogrammetry%20Classification.html&label=All

image.png

两个3Dtiles数据：一个是真正的倾斜摄影数据；一个是立方体盒子的数据；设置立方体盒子的样式，分类的样式，遮罩的效果。

大雁塔数据 视频说明

视频课程链接地址
位于06:00左右

image.png

西部世界 EarthSDK的官网示例：

EarthSDK的官网