glb模型实现
GLB模型是一种3D模型的文件格式，全称为GLTF Binary。这种格式融合了GLTF格式和二进制数据，用于存储和传输3D模型及相关数据。GLB模型具有多种优点，包括小巧高效、可压缩、支持材质和纹理以及跨平台兼容性等。因此，它适用于网络传输、实时渲染和交互应用，如虚拟现实（VR）、增强现实（AR）和游戏开发等领域。
准备模型
可以前往sketchfab.com/ 下载免费glb模型
步骤一:打开sketchfab官网，搜索任一想使用的模型
步骤二:找到模型右上角带有下载标志的模型，这种一般都是可以免费下载下来的
步骤三:点击下载，选择glb格式，下载到本地
代码中引用
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link
href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#my-map {
width: 100%;
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<div id="my-map"></div>
<script>
Cesium.Ion.defaultAccessToken =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NDYzMzkyYy0xZDIzLTQyYWItOTE4OC0xMWEyNDE5MzY0MjMiLCJpZCI6MTY1MjA0LCJpYXQiOjE2OTQxMzc5NDF9.HJPrgaIb6MfQPj4WXmR_coS8SEloNJH5LIGgXDOWX6Y'
const viewer = new Cesium.Viewer('my-map', {
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false, // 影像切换
animation: true, // 是否显示动画控件
infoBox: false, // 是否显示点击要素之后显示的信息
selectionIndicator: false, // 要素选中框
geocoder: false, // 是否显示地名查找控件
timeline: true, // 是否显示时间线控件
fullscreenButton: false,
shouldAnimate: true,
navigationHelpButton: false, // 是否显示帮助信息控件
shadows: true
})
function createModel(url, height) {
viewer.entities.removeAll()
const position = Cesium.Cartesian3.fromDegrees(
-123.0744619,
44.0503706,
height
)
const heading = Cesium.Math.toRadians(135)
const pitch = 0
const roll = 0
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
const orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr)
const entity = viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 20000
}
})
viewer.trackedEntity = entity
}
createModel('./asia_building.glb', 10)
</script>
</body>
</html>
