文档章节

Cesium教程番外篇--自定义Geometry(一)

罗松与拇指
 罗松与拇指
发布于 2014/06/26 12:58
字数 593
阅读 1492
收藏 1
点赞 0
评论 0

原文地址: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来绘制



© 著作权归作者所有

共有 人打赏支持
罗松与拇指
粉丝 11
博文 4
码字总数 3941
作品 0
海淀
程序员
Cesium入门教程翻译

Cesium是一个基于WebGL的虚拟三维地图引擎。 官网http://cesiumjs.org/ 目标 Cesium希望是创建一个全球领先的基于网络的可视化三维动态地图引擎,Cesium努力实现最好的性能, 精度,观感,易...

罗松与拇指 ⋅ 2014/02/23 ⋅ 0

各种GeometryInstance的添加方法

Cesium.Math.setRandomNumberSeed(1234); var viewer = new Cesium.Viewer('cesiumContainer'); var scene = viewer.scene; var primitives = scene.primitives; var solidWhite = Cesium.Co......

zhishiqu ⋅ 01/09 ⋅ 0

翻译 Cesium入门教程(一)------环境配置 Hello World

转载请注明出处 http://my.oschina.net/u/149294/blog/202433 本人建了一个QQ群:115883691,欢迎大家一起来讨论Cesium相关技术 首先确保你的浏览器支持Cesium 判断你的浏览器是否支持Cesiu...

罗松与拇指 ⋅ 2014/02/23 ⋅ 0

Cesium中Clock控件及时间序列瓦片动态加载

发这篇文章实在不容易,导致我的简书被封号,原因是在文中插入了一个他们禁止的链接。。。好吧,什么都不说了! 前言 前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,...

魏守峰 ⋅ 2017/12/16 ⋅ 0

翻译 Cesium入门教程(二)------图层 Imagery Layers

转载请注明出处 http://my.oschina.net/u/149294/blog/202464 本人建了一个QQ群:115883691,欢迎大家一起来讨论Cesium相关技术 Cesium支持通过许多标准的服务,渲染和以图层的方式组织高分辨...

罗松与拇指 ⋅ 2014/02/23 ⋅ 0

PyQt5番外篇(3):你难道不爱我吗???(2018情人节特刊)

小编一进办公室,办公室中所有人便都看着他笑,有的叫道,“今年的情人节你又单了啊!”他不回答,拿起手机说,“宝贝吃饭没?”便甩出一副早已脱单的样子。他们又故意的高声嚷道,“你会有女...

学点编程吧 ⋅ 02/14 ⋅ 0

Cesium学习笔记(五)几何和外观

之前的笔记种记录了Cesium可以使用实体(如多边形和椭球)创建不同的地质类型。例如:使用点阵图在地球上创建一个矩形 下面将记录primitives ,并查看形成它们的类型Geometry和Appearance类型...

HobHunter ⋅ 2017/07/14 ⋅ 0

《史上最简单的 SpringCloud 教程》系列

《史上最简单的 SpringCloud 教程》系列: 史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka) 史上最简单的SpringCloud教程 | 第二篇: 服务消费者(rest+ribbon) 史上最...

xiaogong1688 ⋅ 2017/09/15 ⋅ 0

Cocos学习笔记

说明: (1)基于cocos2dx2.2.3,使用C++语言,在Visual Studio 2010进行开发的。 (2)基于cocos2dx3.x ,使用C++语言,在Visual Studio 2013 与 Xcode进行开发的。 (3)基于Cocos Code ID...

shahdza ⋅ 2014/08/12 ⋅ 0

史上最简单的 SpringCloud 教程 | 终章

转载请标明出处: http://blog.csdn.net/forezp/article/details/70148833 本文出自方志朋的博客 错过了这一篇,你可能再也学不会 Spring Cloud 了!Spring Boot做为下一代 web 框架,Sprin...

forezp ⋅ 2017/04/12 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iExec Blockchain Marketplace for Cloud

iExec Releases the First-Ever Blockchain Marketplace for Trading Cloud Computing Berlin, Germany, May 29, 2018. iExec has released its blockchain-based decentralized cloud marke......

openthings ⋅ 13分钟前 ⋅ 0

OSChina 周二乱弹 —— 加班的代码不要枉费了我的童子功

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《29》- 未完成乐队 《29》- 未完成乐队 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :#看球提醒# 02:00 巴西v...

小小编辑 ⋅ 32分钟前 ⋅ 11

Docker Swarm的前世今生

概述 在我的《Docker Swarm集群初探》一文中,我们实际体验了Docker Swarm容器集群技术的魅力,与《Kubernetes实践录》一文中提到的Kubernetes集群技术相比,Docker Swarm没有Kubernetes显得...

CodeSheep ⋅ 今天 ⋅ 0

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 今天 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部