ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

CesiumJS 4 步搭起一座虚拟博物馆:把文化遗产数字化搬进浏览器

CesiumJS 4 步搭起一座虚拟博物馆:把文化遗产数字化搬进浏览器 CesiumJS 4 步搭起一座虚拟博物馆把文化遗产数字化搬进浏览器【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium如果展厅没有门也就不用闭馆。CesiumJS 是一款开源 JavaScript 3D 地球与地理空间可视化库用它做文化遗产数字化等于给博物馆造一个永远在线的展厅展品可以拖转、拉近位置还嵌在真实地理坐标里。这个库的本职工作是 3D 地球与地图渲染但它的渲染管线、数据格式和交互体系恰好凑齐了沉浸式展览需要的三块基石。下面先拆开看这三块基石再带你用 4 步把第一间展厅搭起来。它凭什么撑得起一场虚拟展览先说渲染管线。CesiumJS 基于 WebGL瓦片式 3D 场景按需流式加载离你远的部分自动用低精度顶替帧率因此稳得住。对展厅而言这意味着展品从全景到特写切换时不会出现卡一下再出现的断裂感。再看数据格式。单件展品走 glTF / glb 标准这是 3D 可视化领域事实上的交换格式建模软件导出后基本免改就能进浏览器体积大的模型可以开 Draco 压缩和 KTX2 纹理压缩。整座遗址或街区级别的大场景则交给 3D Tiles——它按瓦片分块靠近才加载细节是承载大范围遗产场景的骨架。最后是交互体验。Viewer 开箱自带相机控制旋转、缩放、倾斜都是默认动作观众不需要学习成本点击拾取picking加信息框infoBox让点展品看说明这种最基本的讲解需求开箱即用。三块基石都在虚拟博物馆才不是玩具。下面进入上手路径。从空白页面到第一个虚拟展厅的 4 个步骤基石讲完了接下来按顺序做四件事每一步都建立在上一步的结果之上。第 1 步把库装进项目。在终端里执行npm install cesium --save装好后在页面里建一个容器用new Cesium.Viewer(容器id)创建 Viewer一个带卫星影像的 3D 地球就出现了。做独立展览时可以把默认界面组件关掉让画面更展厅。第 2 步让第一件 glTF 文物模型看得到、转得动。这一步就是典型的 glTF 模型加载viewer.entities.add加一个带model: { uri }的实体uri 指向 .glb 文件再用Cesium.Cartesian3.fromDegrees把展品摆到想要的经纬度上配合viewer.zoomTo把相机推到合适距离。minimumPixelSize和maximumScale两个参数建议顺手设一下前者防止模型拉远后小到看不见后者防止特写时大到爆框。第 3 步把看升级为查。打开 infoBox 和选中指示器后点击模型会高亮并弹出说明面板——文物名称、简介都放这里。点击背后是 picking 拿到实体再读它挂的元数据CesiumJS 支持给 glTF 节点写 metadata把展品编号、馆藏信息提前写进模型文件点击时随取随用。第 4 步补上时间与氛围。打开 shadows 让展品投下影子接上 clock 给展览加时间轴再换一套天空盒一个能看、能转、能查的虚拟展厅就初具规模了。让展览活起来的几个做法展厅能转了接下来是让它像展览而不是演示。点击要有回音。infoBox 是讲解的容器但把 glTF 的 metadata 做细一点——材质、年代、出土地都写进去infoBox 里按字段渲染成小卡片讲解深度立刻不一样。展品一多就调性能。这是虚拟展厅性能调优的核心模型上 Draco 压缩纹理换 KTX2大场景改走 3D Tiles 让远处瓦片自动降级加载再配合前面提到的minimumPixelSize加载速度和帧率通常能一起改善。给展品一条时间线。Clock 加时间动态属性是展示建筑修复过程、历史时期切换最顺手的做法——同一位置不同时刻呈现不同状态。给展品一个环境。孤零零摆在地球上的展品会显得单薄。把地形和卫星影像加回来再配上天空盒与氛围效果想讲修复前后的故事直接用分屏能力把两个视角并排摆出来对比一目了然。仓库里能直接借用的素材写代码之前先去仓库里逛一圈现成的参考比空想省时间。Apps/SampleData/models/十几个现成 glb 模型CesiumMan、CesiumMilkTruck 等都可以直接拖进自己的 Viewer 验证效果。Specs/Data/Models/glTF-2.0/覆盖动画、Draco 压缩等特性的测试模型集每个模型基本对应一类能力。packages/sandcastle/gallery/Sandcastle 示例库。3d-models里就是 glb 加载、定位、跟踪的完整写法可以直接抄改montreal-point-cloud是文化遗产点云可视化的典型做法3d-tiles-photogrammetry展示了实景倾斜摄影的大场景流式加载。核心引擎在 packages/engine/Source/UI 组件在 packages/widgets/Source/想深挖某块能力时按这个目录找。先把第一间展厅跑起来文化遗产数字化的门槛卡在第一件展品进浏览器这一步而 CesiumJS 把这一步压到了一次entities.add的距离。建议你现在就选一个现有 glb 或 3D Tiles放进 Viewer再加上点击查询——第一间展厅跑起来之后其余调优都可以慢慢来。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表