javascript - 如何在地形底部裁剪实体或几何体

标签 javascript cesiumjs

我正在使用 Cesium.Globe 裁剪平面来提取方形地理截面。但一个问题是地形背面没有渲染,这使得当用户选择较浅的视角时看起来很奇怪。

Shallow View

我认为隐藏它的一种方法是将“土壤”渲染为地形下方的盒子或墙壁,但我需要盒子或墙壁的顶部来确认地形几何形状(红线)。 我想我可以通过使用 WallGeometry 来实现这一点围绕被剔除的地形而不是盒子,并根据 sampleTerrain 的结果设置每个部分的高度打电话。

但我想知道 Cesium 是否提供了一种更简单、更简洁的方法来做到这一点。 (比如一些 bool 联合函数或其他东西)

Cut out box

Cesium Sandcastle link

var viewer = new Cesium.Viewer('cesiumContainer', {
        skyAtmosphere: false,
        shouldAnimate : true,
        terrainProvider: Cesium.createWorldTerrain()
    });
var globe = viewer.scene.globe;

var position = Cesium.Cartographic.toCartesian(new Cesium.Cartographic.fromDegrees(-113.2665534, 36.0939345, 100));
var distance = 3000.0;

globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
    modelMatrix : Cesium.Transforms.eastNorthUpToFixedFrame(position),
    planes : [
        new Cesium.ClippingPlane(new Cesium.Cartesian3( 1.0,  0.0, 0.0), distance),
        new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0,  0.0, 0.0), distance),
        new Cesium.ClippingPlane(new Cesium.Cartesian3( 0.0,  1.0, 0.0), distance),
        new Cesium.ClippingPlane(new Cesium.Cartesian3( 0.0, -1.0, 0.0), distance)
    ],
    unionClippingRegions : true,
            edgeWidth:3,
    edgeColor: Cesium.Color.RED,
    enabled : true
});
var rockBox = viewer.entities.add({
    name : 'RockBox',
    position: Cesium.Cartesian3.fromDegrees(-113.2665534, 36.0939345, 900),
    box : {
        dimensions : new Cesium.Cartesian3(distance*2, distance*2,800.0),
        material : Cesium.Color.GRAY.withAlpha(0.4),
        outline : true,
        outlineColor : Cesium.Color.GRAY
    }
});
var waterTable = viewer.entities.add({
    name : 'WaterTable',
    position: Cesium.Cartesian3.fromDegrees(-113.2665534, 36.0939345, 440),
    box : {
        dimensions : new Cesium.Cartesian3(distance*2, distance*2, 160.0),
        material : Cesium.Color.BLUE.withAlpha(0.9),
        outline : true,
        outlineColor : Cesium.Color.BLUE
    }
});

viewer.zoomTo(viewer.entities);

最佳答案

在更新的 CesiumGS 版本(当前为 1.72)中,我们通过公共(public) API 显示地形背面,如下所示:

viewer.scene.globe.backFaceCulling = false;

关于javascript - 如何在地形底部裁剪实体或几何体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53277048/

相关文章:

javascript - firebase 按生日月份获取 child

cesiumjs - 如何在CesiumJS中设置SimplePolylineGeometry基元的宽度

javascript - 在 Cesium 中,动态旋转罗盘在经过 360 度时会向后重置为 0

javascript - cesium 的 ES6 风格导入

javascript - 在 Cesium 查看器/ map 上覆盖一个工具栏

javascript - 使用 jquery 创建基于 JSON 的动态 SelectBox

javascript - Nativescript Angular 2每次在页面加载时调用函数

javascript - 如何获取 SVG 动画的当前时间/位置?

javascript - 改变壁厚铯

javascript - 控制 HTML5 视频的开始位置和播放持续时间