<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>文档</title>
<link href="./css/semantic/semantic.min.css" rel="stylesheet">
<link href="./css/oscTree.css" rel="stylesheet">
<link href="./css/markdown.css" rel="stylesheet">
<link href="./css/index.css" rel="stylesheet">
</head>
<body>
<div class="ui container">
<div id="project-title">
<div class="title-wrap">
<div class="left">
<i class="icon eye"></i>
文档预览:
<span id="preview-title"></span>
</div>
<div class="right">
Export by Gitee
</div>
</div>
</div>
<div class="ui container" id="wiki-preview-container">
<div id="wiki-preview">
<div class="ui segment">
<div class="ui grid page">
<div class="three wide column doc-list">
<div class="title">
<a id="ex-all">
收缩全部章节
</a>
</div>
<div class="ztree" id="tree"></div>
</div>
<div class="thirteen wide column doc-content">
<div id="page-detail">
<div class="title">
</div>
<div class="content markdown-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="./js/jquery.min.js"></script>
<script src="./js/ztree.all.js"></script>
<script src="./js/jquery.ztree.exhide.min.js"></script>
<script>
var zTreeObj;var expandStatus=true;$(document).ready(function(){var setting={view:{showLine:true,showIcon:true},callback:{onClick:function(e,treeId,treeNode){if(treeNode!==null&&!treeNode.isParent&&typeof(treeNode.children)==="undefined"){var sort_id=treeNode.sort_id;var content=json_data.content;for(var c in content){if(c==sort_id){$("#page-detail .title").html(treeNode.name);$("#page-detail .content").html(content[c]);return false}}}else{zTreeObj.expandNode(treeNode)}}},data:{simpleData:{enable:true}}};zTreeObj=$.fn.zTree.init($("#tree"),setting,json_data.title);var first_content=json_data.title[0];$("#page-detail .title").html(first_content.name);$("#page-detail .content").html(json_data.content[first_content.sort_id]);$("#preview-title").html(json_data.preview_title);$("#ex-all").on("click",function(e){zTreeObj.expandAll(!expandStatus);expandStatus=!expandStatus;if(expandStatus){$(this).text("收缩全部章节")}else{$(this).text("展开全部章节")}})});
</script><script>var json_data = {"preview_title":"notes","title":[{"id":"000000000000Home","pId":0,"name":"Home","parent":null,"order":0,"sort_id":1708355,"extname":".md","isParent":false,"isHidden":false,"content":"\u003Cp\u003EWelcome to the Gitee wiki!\u003C/p\u003E"},{"id":"000000000000Cesium快速上手1-CesiumWidget-Scene结构","pId":0,"name":"Cesium快速上手1-CesiumWidget-Scene结构","parent":null,"order":1,"sort_id":1855536,"extname":".md","isParent":false,"isHidden":false,"content":"\u003Ch1\u003E\n\u003Ca id=\"cesium快速上手1-cesiumwidget-scene结构\" class=\"anchor\" href=\"#cesium%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B1-cesiumwidget-scene%E7%BB%93%E6%9E%84\"\u003E\u003C/a\u003ECesium快速上手1-CesiumWidget-Scene结构\u003C/h1\u003E\n\u003Ch3\u003E\n\u003Ca id=\"三维地球的核心\" class=\"anchor\" href=\"#%E4%B8%89%E7%BB%B4%E5%9C%B0%E7%90%83%E7%9A%84%E6%A0%B8%E5%BF%83\"\u003E\u003C/a\u003E三维地球的核心\u003C/h3\u003E\n\u003Ch5\u003E\n\u003Ca id=\"cesiumwidget才是核心类\" class=\"anchor\" href=\"#cesiumwidget%E6%89%8D%E6%98%AF%E6%A0%B8%E5%BF%83%E7%B1%BB\"\u003E\u003C/a\u003ECesiumWidget才是核心类\u003C/h5\u003E\n\u003Cp\u003ECesium的api非常烦杂,我们从核心说起。搭建一个三维Web程序所需要的最基本的东西有哪些呢?\n我们需要一个div,然后基于此div创建canvas,引入webgl环境。\n每个三维渲染引擎都有各自不同的方法或者类来做这件事情,Cesium则是通过CesiumWidget这个类创建。如下所示:\u003C/p\u003E\n\u003Cp\u003Ehtml代码部分\u003C/p\u003E\n\u003Cpre lang=\"html\" class=\"html\"\u003E\u003Ccode\u003E\u0026lt;style\u0026gt;\n @import url(../templates/bucket.css);\n\u0026lt;/style\u0026gt;\n\u0026lt;div id=\"cesiumContainer\" class=\"fullSize\"\u0026gt;\u0026lt;/div\u0026gt;\n\u0026lt;div id=\"loadingOverlay\"\u0026gt;\u0026lt;h1\u0026gt;Loading...\u0026lt;/h1\u0026gt;\u0026lt;/div\u0026gt;\n\u0026lt;div id=\"toolbar\"\u0026gt;\u0026lt;/div\u0026gt;\n\u003C/code\u003E\u003C/pre\u003E\n\u003Cp\u003Ejs代码部分\u003C/p\u003E\n\u003Cpre lang=\"javascript\" class=\"javascript\"\u003E\u003Ccode\u003Evar widget = new Cesium.CesiumWidget('cesiumContainer');\n\u003C/code\u003E\u003C/pre\u003E\n\u003Cp\u003E\u003Ca href=\"http://localhost:8080/Apps/Sandcastle/index.html?src=Cesium%20Widget.html\"\u003Ehttp://localhost:8080/Apps/Sandcastle/index.html?src=Cesium%20Widget.html\u003C/a\u003E\u003C/p\u003E\n\u003Cp\u003E\u003Cimg src=\"https://images.gitee.com/uploads/images/2020/0113/091337_2cdfd9c4_470194.png\" alt=\"用CesiumWidget创建地球\"\u003E\u003C/p\u003E\n\u003Cp\u003E这个示例在Cesium的Sandcastle当中,但是非常不起眼。很多人容易忽略掉。因为这几乎是唯一使用CesiumWidget来创建Cesium三维应用的示例了。但这并不代表它不重要。相反,它才是真正创建Cesium三维窗口的核心类。\u003C/p\u003E\n\u003Cp\u003E如果是已经使用Cesium进行开发过的小伙伴们,可能对此类并不熟悉。毕竟Cesium中最常用的是Viewer、Entity这些类。不过这些类内部结构比较复杂,我们还是希望先忽略这两个类。等把底层的框架说清楚以后,再回头看着两个类,会对Cesium的理解更加深刻。\u003C/p\u003E\n\u003Cp\u003ECesiumWidget构造时,手里拿了一个叫\u003Ccode\u003EcesiumContainer\u003C/code\u003E的字符串,它实际上是一个div的id。这个div好比一个舞台,CesiumWidget有了这个舞台,就开始创建一系列子div,还是canvas对象,据此搭建了整个三维场景。\u003C/p\u003E\n\u003Cp\u003ECesiumWidget内部创建的对象主要有以下几个部分,如图所示:\u003C/p\u003E\n\u003Cp\u003E\u003Cimg src=\"https://images.gitee.com/uploads/images/2020/0113/091336_1c30e4b9_470194.png\" alt=\"CesiumWidget结构图\"\u003E\u003C/p\u003E\n\u003Cp\u003Eclock用来记录时间,毕竟三维场景需要进行动态展示,需要通过时间来确定某一帧的绘制内容。\ncontainer则是构造函数的参数,也就是传入的div,这里记录一下。\ncanvas则是在container上构建的Canvas类的对象,可以据此获取WebGL绘制的画笔。\nscreenSpaceEventHandler则是对Canvas对象上各种鼠标的交互事件的封装,方便传递给三维场景。三维场景干之后可以据此改变相机姿态等。\nscene则承载着整个三维场景中的对象。\u003C/p\u003E\n\u003Ch5\u003E\n\u003Ca id=\"scene中装载了所有的三维对象\" class=\"anchor\" href=\"#scene%E4%B8%AD%E8%A3%85%E8%BD%BD%E4%BA%86%E6%89%80%E6%9C%89%E7%9A%84%E4%B8%89%E7%BB%B4%E5%AF%B9%E8%B1%A1\"\u003E\u003C/a\u003EScene中装载了所有的三维对象\u003C/h5\u003E\n\u003Cp\u003EScene中有一些内置的图元对象:地球(globe)、skyBox(天空盒)、sun(太阳)、moon(月亮)等等;\n另外还有两个用来由用户自行控制存放对象的数组:primitives和groundPrimitives。\u003C/p\u003E\n\u003Cp\u003E\u003Cimg src=\"https://images.gitee.com/uploads/images/2020/0113/091336_a5c6987e_470194.png\" alt=\"Scene的结构\"\u003E\u003C/p\u003E\n\u003Ch5\u003E\n\u003Ca id=\"图元类对应一个三维渲染对象\" class=\"anchor\" href=\"#%E5%9B%BE%E5%85%83%E7%B1%BB%E5%AF%B9%E5%BA%94%E4%B8%80%E4%B8%AA%E4%B8%89%E7%BB%B4%E6%B8%B2%E6%9F%93%E5%AF%B9%E8%B1%A1\"\u003E\u003C/a\u003E图元类对应一个三维渲染对象\u003C/h5\u003E\n\u003Cp\u003E图元是C
没有合适的资源?快使用搜索试试~ 我知道了~
Cesium,学习助手!!
共22个文件
png:5个
css:4个
js:3个
需积分: 0 3 下载量 62 浏览量
2023-03-13
11:17:21
上传
评论
收藏 768KB ZIP 举报
温馨提示
Cesium,学习助手!!
资源推荐
资源详情
资源评论
收起资源包目录
cesium快速上手视频文档.zip (22个子文件)
cesium快速上手视频文档
index_with_tree.html 62KB
js
ztree.all.js 149KB
jquery.ztree.exhide.min.js 5KB
jquery.min.js 85KB
css
semantic
semantic.min.css 535KB
themes
default
assets
images
flags.png 27KB
fonts
icons.eot 162KB
icons.otf 92KB
icons.svg 434KB
icons.woff2 75KB
icons.ttf 162KB
icons.woff 96KB
assets
md-hr.png 939B
pin-20.png 3KB
oscTree.css 6KB
img
metro.png 5KB
line_conn.png 933B
loading.gif 381B
metro.gif 5KB
markdown.css 7KB
index.css 1KB
index.html 25KB
共 22 条
- 1
资源评论
qq_42361136
- 粉丝: 0
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功