Cesium教程番外篇--自定义Geometry(一)
Cesium教程番外篇--自定义Geometry(一)
罗松与拇指 发表于3年前
Cesium教程番外篇--自定义Geometry(一)
  • 发表于 3年前
  • 阅读 1050
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: Cesium自定义一个四面体的方法

原文地址:http://my.oschina.net/u/149294/blog/284363

首先

由于Cesium目前接口还不是很稳定,每个版本之间差异较大,所以请确保你下载了最版本b29,并且配置好了环境,参见环境配置

Cesium交流群:115883691,欢迎大家一起来讨论Cesium相关技

开始

直接上代码

var TetrahedronGeometry = function(){
        var negativeRootTwoOverThree = -Math.sqrt(2.0) / 3.0;
        var negativeOneThird = -1.0 / 3.0;
        var rootSixOverThree = Math.sqrt(6.0) / 3.0;
        
        //四面体的四个顶点
        var positions = new Float64Array(4 * 3);

        // position 0
        positions[0] = 0.0;
        positions[1] = 0.0;
        positions[2] = 1.0;

        // position 1
        positions[3] = 0.0;
        positions[4] = (2.0 * Math.sqrt(2.0)) / 3.0;
        positions[5] = negativeOneThird;

        // position 2
        positions[6] = -rootSixOverThree;
        positions[7] = negativeRootTwoOverThree;
        positions[8] = negativeOneThird;

        // position 3
        positions[9] = rootSixOverThree;
        positions[10] = negativeRootTwoOverThree;
        positions[11] = negativeOneThird;

        var attributes = new Cesium.GeometryAttributes({
            position : new Cesium.GeometryAttribute({
                componentDatatype : Cesium.ComponentDatatype.DOUBLE,
                componentsPerAttribute : 3,
                values : positions
            })
        });

        //顶点索引
        var indices = new Uint16Array(4 * 3);

        // back triangle
        indices[0] = 0;
        indices[1] = 1;
        indices[2] = 2;

        // left triangle
        indices[3] = 0;
        indices[4] = 2;
        indices[5] = 3;

        // right triangle
        indices[6] = 0;
        indices[7] = 3;
        indices[8] = 1;

        // bottom triangle
        indices[9] = 2;
        indices[10] = 1;
        indices[11] = 3;
        
        //包围球
        var boundingSphere = new Cesium.BoundingSphere(new Cesium.Cartesian3(0.0,0.0,0.0),1.0);

        var geometry = Cesium.GeometryPipeline.computeNormal(new Cesium.Geometry({
            attributes: attributes,
            indices: indices,
            primitiveType: Cesium.PrimitiveType.TRIANGLES,
            boundingSphere: boundingSphere
        }));

        this.attributes = geometry.attributes;
        this.indices = geometry.indices;
        this.primitiveType = geometry.primitiveType;
        this.boundingSphere = geometry.boundingSphere;
        //this.boundingSphere = Cesium.BoundingSphere.fromVertices(positions);
    };

四面体是四个顶点组成的,为了不损失精度在保存顶点位置的时候我们使用了Float64Array

四面体的每个面都又三个顶点组成,通过使用顶点索引我们可以减少所要使用的顶点数,节约内存。每个顶点都将被使用3次,索引的存储使用Uint16Array,加入超过6k也可以用Uint32Array。

通过上述代码我们定义了一个四面体,接下来我们来把它加到场景中。

var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer');
    var scene = cesiumWidget.scene;
    var ellipsoid = cesiumWidget.scene.globe.ellipsoid;
    
    //模型矩阵
    var modelMatrix = Cesium.Matrix4.multiplyByUniformScale(
            Cesium.Matrix4.multiplyByTranslation(
                    Cesium.Transforms.eastNorthUpToFixedFrame(ellipsoid.cartographicToCartesian(
                            Cesium.Cartographic.fromDegrees(-100.0, 40.0))),
                    new Cesium.Cartesian3(0.0, 0.0, 200000.0)),
            500000.0);
    
    //四面体的实例
    var instance = new Cesium.GeometryInstance({
        geometry : new TetrahedronGeometry(),
        modelMatrix : modelMatrix,
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)    //白色
        }
    });
    
    //加入场景
    scene.primitives.add(new Cesium.Primitive({
        geometryInstances : instance,
        appearance : new Cesium.PerInstanceColorAppearance({
            flat : true,
            translucent : false
        })
    }));

运行代码,你将看到如下画面

这个四面体是不是看的不是很清楚啊,你确定这是四面体?难道不是三角形?,确实!!!

现在我们把创建四面体实例的代码替换为下面这样:

var instance = new Cesium.GeometryInstance({
        geometry : Cesium.GeometryPipeline.toWireframe(new TetrahedronGeometry()),
        modelMatrix : modelMatrix,
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)
        }
    });

现在再来看看呢,GeometryPipeline.toWireframe将会使几何体使用Lines来绘制



标签: Cesium webgl 3dgis gis
共有 人打赏支持
粉丝 11
博文 4
码字总数 3941
×
罗松与拇指
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: