zoukankan      html  css  js  c++  java
  • Cesium专栏-裁剪效果(基于3dtiles模型,附源码下载)

    Cesium


    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。

    效果图

    关于裁剪


    裁剪在PS下大概都很熟悉,框出一个矩形选择自己想要的部分就是裁剪功能了,那么,在三维里,在Cesium中,可以模拟这种动态裁剪模型效果,本文侧重于基于3dtiles模型的裁剪效果。

    需要提前预习的接口


    • ClippingPlaneCollection
    • ClippingPlane
    • Plane
    • Cesium3DTileset
    • CallbackProperty

    具体操作

    1、初始化地球,并开启深度测试

    Cesium.Ion.defaultAccessToken = 'xxxx';
    var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
    })
    });
    var scene = viewer.scene;
    viewer.scene.globe.depthTestAgainstTerrain = true;

    2、创建切面平面对象

    // 创建切面平面集合
    var clippingPlanes = new Cesium.ClippingPlaneCollection({
    planes: [
    new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 0, -1), 0) // 平面的方向 以及 平面到原点的距离
    ],
    edgeColor: Cesium.Color.WHITE, // 平面切割时模型的边缘颜色
    edgeWidth: 0 // 平面切割时模型的边缘宽度
    });

    3、加载3dtiles模型,并指定裁剪平面

    更多详情见小专栏GIS之家cesium小专栏

    文章提供源码,对本专栏感兴趣的话,可以关注一波

  • 相关阅读:
    又从头开始
    test1
    day1
    路飞学成-Python爬虫实战密训-第3章
    路飞学成-Python爬虫实战密训-第2章
    路飞学成-Python爬虫实战密训-第1章
    【软件测试】(homework3)覆盖问题
    【软件测试】(homework3)有关三角形的测试练习
    【软件测试】(homework2)错误分析
    【软件测试】(homework1)描述曾遇到且已经被解决的error
  • 原文地址:https://www.cnblogs.com/giserhome/p/11011797.html
Copyright © 2011-2022 走看看