cesium教程5-用primitive加载glb和gltf格式的小模型
primitive加载方法更底层,用起来更麻烦,但是效率更高。

完整示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cesium示例</title>
<!-- 引用cesium的js和css,天地图的扩展js -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
<style type="text/css">
html, body, #tiandituContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style> </head>
<body onload="loadData()">
<div id="tiandituContainer">
</div>
<script> //Cesium官网注册后的授权token,没有token不能使用cesium在线的地形服务,这里需要改成自己的token
Cesium.Ion.defaultAccessToken = ""; var viewer;
function loadData()
{
//默认会调用微软virtualearth地图
viewer = new Cesium.Viewer('tiandituContainer',{
animation:false, //是否显示动画控件
homeButton:true, //是否显示home键
geocoder:true, //是否显示地名查找控件,如果设置为true,则无法查询
baseLayerPicker:true, //是否显示图层选择控件
timeline:false, //是否显示时间线控件
fullscreenButton:true, //是否全屏显示
infoBox:true, //是否显示点击要素之后显示的信息
sceneModePicker:true, //是否显示投影方式控件 三维/二维
navigationInstructionsInitiallyVisible:false, //导航指令
navigationHelpButton:false, //是否显示帮助信息控件
selectionIndicator:false, //是否显示指示器组件
});
//隐藏cesium的logo
viewer._cesiumWidget._creditContainer.style.display = "none";
//默认的Cesium会加载一个bingMap底图,这个地图网络不太好,一般要先去掉这个默认的
viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); //arcgis在线影像地图
viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
name:"img_arcgis",
url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
})); viewer.scene.globe.depthTestAgainstTerrain = true;//地形遮挡效果开关,打开后地形会遮挡看不到的区域
viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效果 //加载小模型
addModel("https://data.mars3d.cn/gltf/mars/feiji.glb",120.131292,30.471157,0); // 将三维球定位到模型
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(120.132072,30.471217, 2000),
orientation: {
heading : Cesium.Math.toRadians(348.4202942851978),
pitch : Cesium.Math.toRadians(-89.74026687972041),
roll : Cesium.Math.toRadians(0)
},
complete:function callback() {
// 定位完成之后的回调函数
}
});
}
function addModel(url,longitude,latitude,height) {
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
);
viewer.scene.primitives.add(Cesium.Model.fromGltf({//Gltf和glb模型都用fromGltf
url: url,
modelMatrix: modelMatrix,
minimumPixelSize : 512,
maximumScale : 200000,
scale : 1,
})
);
} </script>
</body>
</html>
cesium教程5-用primitive加载glb和gltf格式的小模型的更多相关文章
- esri-leaflet入门教程(4)-加载各类图层
esri-leaflet入门教程(4)-加载各类图层 by 李远祥 在leaflet中图层一般分为底图(Basemap)和叠加图层(Overlay).前面章节已经介绍过底图其实也是实现了TileLay ...
- Sql server 数据库的备份和还原数据库提示“ 加载的介质已格式化为支持 1 个介质簇,但根据指定的备份设备,应支持 2 个介质簇”
数据库备份和还原总结 在 "M:\2017-Pro\company\other\databak_2014-10\anquanbaowei_db_201704300200.BAK" ...
- WebGL简易教程(十五):加载gltf模型
目录 1. 概述 2. 实例 2.1. 数据 2.2. 程序 2.2.1. 文件读取 2.2.2. glTF格式解析 2.2.3. 初始化顶点缓冲区 2.2.4. 其他 3. 结果 4. 参考 5. ...
- node-webkit教程(15)当图片加载失败的时候
在node-webkit教程(14)禁用缓存中,简单讲了当前禁用缓存的几种方法. 在实际开发过程中,我遇到了一个因为缓存引起的诡异的问题.应用场景如下: 在一个编辑器里,不停的向画布上添加svg或者其 ...
- Cesium如何通过addImageryProvider方法加载SkylineGlobe Server发布的WMS服务
某某某单位用SkylineGlobeServer7版本发布了好些服务,然后让我们在Cesium里都加载进来展示. 其实只要符合OGC标准的,加进来还是很容易的. 示例代码如下: function te ...
- Entity Framework入门教程(8)---预先加载、延迟加载、显示加载
1.预先加载 预先加载:在对一种类型的实体进行查询时,将相关的实体作为查询的一部分一起加载.预先加载可以使用Include()方法实现. 1.加载一个相关实体类型 栗子:使用Include()方法从数 ...
- Cesium随笔(2)加载天地图地图服务【转】
Cesium自带的图层是bing地图和esri,mapbox等图层,木有中文注记,想加载中文注记的图层?废话不说,上代码: var viewer = new Cesium.Viewer('cesium ...
- 【PHP面向对象(OOP)编程入门教程】23.自动加载类 __autoload()函数
很多开发者写面向对象的应用程序时,对每个类的定义建立一个 PHP 源文件.一个很大的烦恼是不得不在每个脚本(每个类一个文件)开头写一个长长的包含文件的列表. 在软件开发的系统中,不可能把所有的类都写在 ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- cocos2d-x游戏开发系列教程-坦克大战游戏加载地图的编写
上节课写了关卡选择场景,那么接下来写关卡内容,先写最基本的地图的加载 我们新建一个场景类,如下所示: class CityScene : public cocos2d::CCLayer { publi ...
随机推荐
- npm 直接安装 GitHub/GitLab 仓库代码及 npm link 本地调试
一.npm 直接安装 GitHub/GitLab 仓库代码 语法 npm install <git remote url> 示例 命令: npm i git@github.com:maze ...
- C# 通过ARP技术来观察目标主机数据包
由于之前写的C# 实现Arp欺诈的文章属于网络攻击,不能够被展示,所以这边我们稍微说一下C#调用ARP包以及查看其他电脑上网数据包的技术,委婉的说一下ARP在局域网之中的应用. 本文章纯属技术讨论,并 ...
- 一种基于DeltaE(CIE 1976)的找色算法
// QuickFinder.cpp : 此文件包含 "main" 函数.程序执行将在此处开始并结束. // #include <iostream> #define _ ...
- 机器学习服务活体检测算法荣获CFCA权威安全认证
随着人脸识别技术在金融.医疗等多个领域的加速落地,网络安全.信息泄露等问题愈为突出,用户对应用稳定性和安全性的要求也更为严格.为保障各行业高效稳定的开展业务,提前发现和应对潜在安全风险,HMS Cor ...
- 基于istio实现多集群流量治理
本文分享自华为云社区<基于istio实现多集群流量治理>,作者: 可以交个朋友. 一 背景 对多云.混合云等异构基础设施的服务治理是Istio重点支持的场景之一.为了提高服务的可用性,避免 ...
- HarmonyOS网络管理开发—Socket连接
简介 Socket连接主要是通过Socket进行数据传输,支持TCP/UDP/TLS协议. 基本概念 ● Socket:套接字,就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象. ● ...
- 重新点亮linux 命令树————网络故障排除[十一五]
前言 简单整理一下网络故障不可达命令. 正文 ping 是否能ping traceroute 追踪路由跳转 mtr 检查数据包是否丢失 nslookup telnet 端口是否可达 tcpdump 能 ...
- 什么是ip协议二
前言 续前面一章. 正文 看下ip选项: 看一张图: 这个ip选项一般我们不用看,即使你去搞硬件,那么做c++或者c的人会告诉你填啥,按照他们设置即可. 那么ip是如何传输的呢? 先看这张图,这张图的 ...
- coco2017 Dataset EDA
Github仓库:gy-7/coco_EDA (github.com) 对coco数据集的分析,近期忙着写论文,空余时间很少能写博文了. EDA的代码放在结尾了,Github仓库里也有.仓库里还有其他 ...
- HarmonyOS NEXT应用开发案例——全屏登录页面
全屏登录页面 介绍 本例介绍各种应用登录页面. 全屏登录页面:在主页面点击跳转到全屏登录页后,显示全屏模态页面,全屏模态页面从下方滑出并覆盖整个屏幕,模态页面内容自定义,此处分为默认一键登录方式和其他 ...