【WebGIS】Cesium：GLTF数据加载

在3D Web GIS开发中，使用GLTF格式的模型可以提高应用的加载速度并提升用户体验。Cesium.js是一个强大的3D地理空间引擎，支持GLTF格式的3D模型，并且提供丰富的API来处理和优化模型的加载和渲染。本文将系统地介绍如何加载GLTF模型，包括从网上下载GLTF模型、将其他3D格式转化为GLTF、以及使用Cesium的API进行优化和交互开发。

GLTF格式简介

GLTF（GL Transmission Format）是一种3D模型的文件格式，专为网络传输和渲染优化。它的优势包括：

  • 轻量级：相比其他格式，GLTF更为轻便，适合网络加载。
  • 便于解析：GLTF使用JSON描述模型数据，易于解析和渲染。
  • 支持PBR（Physically-Based Rendering）：GLTF支持物理材质渲染效果，适用于真实感渲染。

GLTF有两种主要形式：

  • .gltf: JSON格式的文件，资源（如纹理、几何体）以外部形式引用。
  • .glb: 将所有数据打包在一起的二进制文件，更便于网络传输。

从网上获取GLTF模型

免费GLTF模型资源库

  • Sketchfab（https://sketchfab.com）: 提供大量的3D模型，包括GLTF格式。
  • Poly Haven（https://polyhaven.com）: 一个高质量的免费3D模型库。
  • Google Poly: 虽然Google Poly已经关闭，但你仍然可以在第三方网站找到备份的模型数据。

下载和使用GLTF模型

在上述平台上，选择你想要的模型，下载GLTF或GLB文件。如果模型不是GLTF格式，则需要通过工具进行格式转换（见下文）。

Cesium中加载GLTF模型

在Cesium中加载GLTF非常简单，Cesium提供了 Cesium.Model.fromGltf 方法，可以加载GLTF文件并将其添加到场景中。以下是一个加载GLTF模型的完整示例。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cesium 加载 GLTF 模型</title><script src="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html, body, #cesiumContainer {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}</style>
</head>
<body><div id="cesiumContainer"></div><script>// 设置 Cesium Ion 的 Access TokenCesium.Ion.defaultAccessToken = 'your_access_token_here';// 创建 Cesium Viewerconst viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain(), // 加载地形数据imageryProvider: Cesium.createOpenStreetMapImageryProvider(), // 设置地图图层scene3DOnly: true, // 仅加载3D场景，优化性能shadows: true, // 开启阴影效果});// 加载GLTF模型const modelPosition = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0); // 模型位置（经度，纬度，海拔）const model = viewer.scene.primitives.add(Cesium.Model.fromGltf({url: 'https://example.com/model.gltf',  // GLTF文件的URLmodelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(modelPosition), // 将模型放置于特定位置scale: 10.0,  // 调整模型的大小maximumScale: 20.0,  // 最大缩放比例minimumPixelSize: 50  // 模型最小像素大小}));// 设置相机飞行到模型位置viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 500) // 设置相机的飞行高度});// 监听模型加载完成事件model.readyPromise.then(function (model) {console.log('GLTF 模型已成功加载！');}).catch(function (error) {console.error('GLTF 模型加载失败：', error);});</script>
</body>
</html>
  • Cesium.Model.fromGltf: 用于加载GLTF模型，url指定GLTF文件的路径，modelMatrix确定模型在地球上的位置。
  • Cesium.Cartesian3.fromDegrees: 将地理坐标转换为笛卡尔坐标。
  • flyTo: 将相机飞行到模型位置，提供直观的展示效果。
  • readyPromise: 用于处理模型加载完成后的事件。

其他格式转化为GLTF

使用Blender转换模型

Blender是一款免费、开源的3D建模工具，可以用于将其他格式的模型（如FBX、OBJ等）转换为GLTF。以下是Blender中进行转换的步骤：

  1. 导入文件：打开Blender，选择 File > Import，选择所需的格式（如OBJ或FBX），然后导入你的模型。
  2. 调整模型：确保模型的纹理、材质等信息正确加载。
  3. 导出GLTF：选择 File > Export > GLTF 2.0，你可以选择导出为 .gltf（分离的JSON和二进制资源）或 .glb（单个二进制文件）。

Blender提供了细粒度的导出设置，如导出动画、纹理等，确保你的模型与Cesium兼容。

在线工具

有些在线工具也可以将常见的3D格式转换为GLTF：

  • Cesium 3D Tiling Pipeline: https://cesium.com/learn/3d-tiling/3d-tiling-pipeline/
  • Online Convert: https://www.online-convert.com/ 可以将OBJ、FBX等格式文件在线转换为GLTF。

优化GLTF模型的加载和渲染

在使用Cesium加载GLTF模型时，性能是一个需要重点考虑的问题，尤其是在加载大规模3D模型时。以下是一些优化技巧：

使用GLB格式

GLB格式是GLTF的二进制版本，它将所有的资源（如几何体、纹理等）打包在一个文件中，可以减少网络请求次数，提升加载速度。

优化模型的几何体

  • 在Blender等3D工具中，减少模型的多边形数量，优化顶点和面片的分布。
  • 使用 “Decimate Modifier” 来降低模型复杂度，同时保持外观质量。

使用Cesium的LOD（Level of Detail）机制

Cesium支持通过多级细节（LOD）来优化大模型的加载和渲染。可以根据相机与模型的距离，动态加载不同分辨率的模型。

model.maximumScale = 20; // 当相机距离很近时，使用最高分辨率
model.minimumPixelSize = 50; // 当相机距离较远时，模型缩小为最小像素大小

为GLTF模型添加交互事件

在Cesium中，可以为GLTF模型添加各种交互事件，如点击、悬停等。下面的示例展示了如何检测用户点击GLTF模型的事件：

// 创建点击事件
viewer.screenSpaceEventHandler.setInputAction(function (movement) {const pickedObject = viewer.scene.pick(movement.position); // 检测点击的对象if (Cesium.defined(pickedObject)) {const model = pickedObject.primitive;alert('你点击了模型！');}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  • scene.pick:

通过用户点击位置，检测场景中哪个对象被选中。

  • primitive: 返回被点击的模型对象，你可以进一步操作该模型。

GLTF模型的动画与多级细节（LOD）

动画效果

GLTF支持骨骼动画和关键帧动画。通过 activeAnimations API，可以播放GLTF模型的动画。

model.readyPromise.then(function (model) {// 添加所有动画model.activeAnimations.addAll();console.log('动画开始播放');
});

使用LOD提升性能

对于大型模型或复杂的场景，使用LOD机制可以提高Cesium的渲染性能。当相机离模型较远时，Cesium会渲染较低分辨率的模型。

总结

通过以上的介绍，你应该已经掌握了如何在Cesium中加载GLTF模型、从其他格式转换为GLTF、优化加载和渲染性能，以及为模型添加交互事件。GLTF作为轻量级的3D模型格式，非常适合在Web GIS应用中使用。配合Cesium的API，可以轻松实现3D模型的高效渲染和互动展示。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/882576.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

马来酰亚胺-聚乙二醇-巯基/叶酸 MAL-PEG-SH，MAL-PEG-FA实验试剂-抗体偶联物（ADC

马来酰亚胺-聚乙二醇-巯基/叶酸 MAL-PEG-SH，MAL-PEG-FA实验试剂-抗体偶联物（ADC

马来酰亚胺-聚乙二醇-巯基&#xff08;MAL-PEG-SH&#xff09;是一种具有马来酰亚胺&#xff08;MAL&#xff09;和巯基&#xff08;SH&#xff09;官能团的聚乙二醇&#xff08;PEG&#xff09;衍生物。这种化合物在生物分子修饰和药物递送等领域具有重要的应用。 1. 生物分子…
阅读更多...
期货外盘行情源7个市场CTP推送式服务说明

期货外盘行情源7个市场CTP推送式服务说明

在期货交易领域&#xff0c;及时、准确的市场行情信息是投资者做出决策的重要依据。为了满足广大期货投资者对国际期货市场信息的迫切需求&#xff0c;我们特别推出了“期货外盘行情源2千每月7个市场CTP推送式”服务。本服务旨在通过高效、稳定的技术手段&#xff0c;为投资者提…
阅读更多...
基于SpringBoot设计模式之结构型设计模式·桥接模式

基于SpringBoot设计模式之结构型设计模式·桥接模式

文章目录 介绍开始架构图定义类的功能定义类的实现 测试样例 总结 介绍 将抽象部分与它的实现部分分离&#xff0c;使他们都可以独立地发生变化。 Bridge的意思是桥梁。就像在现实世界中&#xff0c;桥梁的功能是将河流的两侧连接起来一样, Bridge模式的作用也是将两样东西连接…
阅读更多...
鸿蒙网络编程系列3-TCP客户端通讯示例

鸿蒙网络编程系列3-TCP客户端通讯示例

1. TCP简介 TCP协议是传输层最重要的协议&#xff0c;提供了可靠、有序的数据传输&#xff0c;是多个广泛使用的表示层协议的运行基础&#xff0c;相对于UDP来说&#xff0c;TCP需要经过三次握手后才能建立连接&#xff0c;建立连接后才能进行数据传输&#xff0c;所以效率差了…
阅读更多...
Fastapi之BackgroundTasks

Fastapi之BackgroundTasks

如何在 FastAPI 中使用 BackgroundTasks 来异步执行后台任务 import asyncio import logging import timefrom fastapi import FastAPI, BackgroundTasks# 配置日志记录级别 logging.basicConfig(levellogging.INFO)# 初始化FastAPI应用 app FastAPI(routesNone)# 初始化任务…
阅读更多...
Go_Parser部署、使用与原理分析

Go_Parser部署、使用与原理分析

文章目录 前言1、概述2、安装与使用2.1、源码安装2.1.1、部署系统依赖组件2.1.1.1、部署IDA Pro 7.5 SP32.1.1.2、部署Python 3.9.132.1.1.3、部署Go 1.13.1 2.1.2、使用源码安装系统 2.2、使用方法2.2.1、准备测试程序2.2.2、创建IDA Pro项目2.2.3、使用Go_Parser解析二进制程…
阅读更多...
植物大战僵尸杂交版游戏分享

植物大战僵尸杂交版游戏分享

植物大战僵尸杂交版游戏下载&#xff1a;夸克网盘分享 无捆绑之类的隐形消费&#xff0c;下载即玩
阅读更多...
电力调度控制中心在电力系统中的作用

电力调度控制中心在电力系统中的作用

在庞大而复杂的电力系统中&#xff0c;电力调度控制中心犹如一颗智慧的心脏&#xff0c;扮演着不可或缺的角色。它不仅是电力输送与分配的指挥官&#xff0c;更是确保电网安全、稳定、高效运行的守护者。关于电力调度控制中心在电力系统中的作用&#xff0c;我们具体了解一下。…
阅读更多...
URL+Tcp/IP+Http Https

URL+Tcp/IP+Http Https

URL 1&#xff0c;在WWW上&#xff0c;每一个信息资源都有统一的且在网上唯一的地址&#xff0c;该地址就叫URL,(统一资源定位器)&#xff0c;它是WWW的统一资源定位标志&#xff0c;就是指网络地址&#xff0c;用于定位网络资源&#xff0c;例如&#xff1a;视频&#xff0c;音…
阅读更多...
全新子比主题7.9.2开心版 子比主题最新版源码

全新子比主题7.9.2开心版 子比主题最新版源码

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 wordpress zibll子比主题7.9.2开心版 修复评论弹授权 可做付费下载站 含wordpress搭建视频教程zibll子比主题安装视频教程支付配置视频教程&#xff0c;视频都是语音讲解&#xff0c;…
阅读更多...
AI产品经理：从入门到精通，一篇文章带你入门！（附学习资料）

AI产品经理：从入门到精通，一篇文章带你入门！（附学习资料）

一、AI产品经理工作全流程概览 AI产品经理工作全流程中与普通产品经理的区别主要是多了算法模型部分&#xff0c;包括模型预研、数据准备、模型构建、模型宣讲、模型验收&#xff0c;协作的对象相对普通产品经理也多了算法工程师。 二、需求定义 需求定义主要要定义清楚以下几…
阅读更多...
Ubuntu系衍生版手动修改配置网卡的配置总结

Ubuntu系衍生版手动修改配置网卡的配置总结

一、Ubuntu系的IP地址配置文件的目录&#xff1a; sudo vim /etc/network/interfaces 二、以DHCP方式配置网卡&#xff1a; 在以上配置文件中添加以下两行&#xff1a; auto enp3s0 iface enp3s0 inet dhcp 三、为网卡配置静态IP地址&#xff1a; 在以上配置文件中添…
阅读更多...
vue $nextTick 实现原理

vue $nextTick 实现原理

nextTick的实现 一&#xff1a;nextTick介绍二&#xff1a;手写nextTick三&#xff1a;具体代码四&#xff1a;实现细节 一&#xff1a;nextTick介绍 nextTick 是 Vue.js 框架中的一个方法&#xff0c;它允许延迟执行一个函数&#xff0c;直到 DOM 更新完成。当你修改了数据并…
阅读更多...
python-qq定时自动消息发送

python-qq定时自动消息发送

预设 qq需要可以enter发送消息 发qq表情代码需要开启快捷表情 import sys import win32gui import win32con import win32clipboard as w import win32api import time import subprocess import datetime import webbrowser import tkinter as tk vb_file_path "./op…
阅读更多...
探索迷宫的奥秘：用 C++ 打造你的迷宫游戏之旅！

探索迷宫的奥秘：用 C++ 打造你的迷宫游戏之旅！

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…
阅读更多...
面试官：重量级锁的8连问，你能接住几个？

面试官：重量级锁的8连问，你能接住几个？

前言 接上一篇偏向锁的十连问&#xff0c;继续升级到重量级锁的进阶版&#xff0c;检验一下自己离精通重量级锁还有多远。建议在读之前了解下Java中重量级锁的实现原理。 重量级锁的ObjectMonitor和JUC中的AQS有什么异同 为什么ObjectMonitor需要cxq和entryList两个等待队列 …
阅读更多...
AUTOSAR_EXP_ARAComAPI的5章笔记（15）

AUTOSAR_EXP_ARAComAPI的5章笔记（15）

☞返回总目录 相关总结&#xff1a;AutoSar AP CM服务接口级别的数据类型总结 5.5 服务接口级别的数据类型 以下章节描述了在ara::com中服务接口用户定义数据类型的 C 语言映射。这里的 “用户定义” 是指那些不是由ara::com API 定义&#xff08;例如InstanceIdentifier、F…
阅读更多...
2024前端面试题-1.自我介绍+常见考点汇总

2024前端面试题-1.自我介绍+常见考点汇总

一、自我介绍模板 个人信息教育背景工作经验技能专长优势特点 &#xff08;注&#xff1a;括号&#xff09;内的内容可视具体情况决定说不说。以下内容仅为个人想法&#xff0c;仅供参考交流&#xff0c;不喜勿喷&#xff0c;感谢留情~* 1、个人信息&#xff1a; 姓名&…
阅读更多...
Leetcode 3325. Count Substrings With K-Frequency Characters I

Leetcode 3325. Count Substrings With K-Frequency Characters I

Leetcode 3325. Count Substrings With K-Frequency Characters I 1. 解题思路2. 代码实现 题目链接&#xff1a;3325. Count Substrings With K-Frequency Characters I 1. 解题思路 这一题思路上就是一个滑动窗口。 我们考察窗口的左边界依次为0到n-1时右边界能够取到的最…
阅读更多...
数据结构编程实践20讲(Python版)—19字典树

数据结构编程实践20讲(Python版)—19字典树

本文目录 19 字典树&#xff08;Trie&#xff09;S1 说明字典树结构字典树的构建与查找字典树的特点字典树的应用领域 S2 示例S3 应用1&#xff1a;基于 big.txt 实现单词的自动补全功能S3 应用2&#xff1a;实现 IP 路由中的最长前缀匹配S3 应用3&#xff1a;基于 Trie 的压缩…
阅读更多...
最新文章

Copyright @ 2022~2023