前端使用Cesium加载三维模型全攻略

这篇具有很好参考价值的文章主要介绍了前端使用Cesium加载三维模型全攻略。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

想象一下,地球在你眼前旋转,上面还有各种3D模型,是不是很酷?Cesium是一个超酷的库,专门用来创建超炫的3D地球和地图。好,言归正传,今天这篇文章就分享一下前端如何使用Cesium加载三维模型。

一:准备工作

首先,确保你已经安装了Cesium库。可以从Cesium官网下载最新版本的库文件,或者使用npm进行安装:

npm install cesium
或者
yarn add cesium

然后,找一个舒服的地方坐下,准备好开始你的3D之旅

二:加载模型

要加载一个3D模型,你需要知道模型在哪里,然后告诉Cesium去哪里找它。就像你告诉外卖小哥你的地址一样。然后,你就可以把这个模型加到你的地球上了!

// 创建你的Cesium Viewer  
let viewer = new Cesium.Viewer('cesiumContainer');  
  
// 定义模型的坐标和大小  
let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(  
    Cesium.Cartesian3.fromDegrees(-75.628982, 40.028194),   
    new Cesium.HeadingPitchRoll()   
);  
  
// 定义模型的路径和其他选项  
let modelOptions = {  
    uri: 'path/to/your/model.gltf',   
    scale: 1.0,   
    minimumPixelSize: 128,   
    maximumScale: 20000,   
    modelMatrix: modelMatrix   
};  
  
// 把模型加到场景里!  
viewer.scene.primitives.add(new Cesium.Model(modelOptions));

我们首先创建了一个Cesium Viewer实例,然后定义了模型的路径和选项。其中,modelMatrix参数用于定义模型的变换矩阵,包括位置、方向、俯仰和偏航角度等。然后,我们使用new Cesium.Model()构造函数创建一个模型实例,并将模型添加到场景中。
当然别忘了把’path/to/your/model.gltf’替换成你自己的GLTF模型文件路径哦!如果你有Blender或者其他的3D建模软件,你可以导出为GLTF格式,然后放到你的项目里。建议用blender免费而且还比较好用。

三:交互和动画

当然,加载模型只是第一步。你还可以和模型互动哦!比如你可以给模型添加碰撞检测,这样你就可以知道哪些地方可以“撞”到模型。就像玩虚拟现实游戏一样!
首先,你需要定义一个碰撞器的形状和大小。然后,你可以把这个碰撞器加到场景里,和你的模型一起显示出来。就像给你的模型穿上盔甲一样!

// 定义碰撞器的位置和尺寸  
var boxGeometry = new Cesium.BoxGeometry({  
    length: 100000, // 长度(单位:米)  
    width: 100000, // 宽度(单位:米)  
    height: 100000 // 高度(单位:米)  
});  
var boxMaterial = new Cesium.Material({  
    fabric: {  
        type: 'Grid', // 使用网格材质类型  
        unlit: true // 不进行光照计算,仅显示碰撞器轮廓线  
    }  
});  
var boxPrimitive = new Cesium.Primitive({ // 创建碰撞器实体对象  
    geometryInstances: new Cesium.GeometryInstance({ // 定义碰撞器几何体实例  
        geometry: boxGeometry, // 使用BoxGeometry作为几何体类型  
        modelMatrix: modelMatrix, // 设置模型变换矩阵,使其与模型对齐  
        id: 'box' // 设置碰撞器标识符,方便后续查找和识别碰撞事件  
    }),  
    asynchronous: false, // 是否异步加载碰撞器几何体数据,这里选择同步加载以提高性能和效率  
    material: boxMaterial // 设置碰撞器材质属性,这里使用网格材质类型显示轮廓线效果  
});  
viewer.scene.primitives.add(boxPrimitive); // 将碰撞器添加到场景中显示出来。

四:其他api实例

就写几个我用到的吧。
1.地理信息查询
当你想要查找某个地点的具体信息时,可以使用Cesium的地理信息查询功能。例如,你可以通过经纬度坐标或地名来查询相关的地理信息

viewer.geocoder.geocode({  
    text: '北京',  
    view: Cesium.ScreenSpaceEventType.LEFT_CLICK  
}).then(function(results) {  
    // 查询成功,获取查询结果  
    var entity = results[0].entity;  
    console.log(entity); // 输出查询到的实体信息  
});

2.轨迹绘制
如果你想要在地图上绘制轨迹,可以使用Cesium提供的轨迹绘制工具。通过定义一系列的经纬度坐标,你可以轻松地绘制出轨迹。

// 定义轨迹的坐标点数组  
var waypoints = [  
    Cesium.Cartesian3.fromDegrees(116.407, 39.904), // 北京  
    Cesium.Cartesian3.fromDegrees(121.473, 31.230), // 上海  
    Cesium.Cartesian3.fromDegrees(104.065, 30.574)  // 成都  
];  
  
// 创建轨迹实体  
var polyline = viewer.entities.add({  
    polyline: {  
        positions: waypoints,  
        width: 5,  
        material: Cesium.Color.RED,  
        leadTime: 0,  
        trailTime: 0  
    }  
});

定义一个包含经纬度坐标的数组waypoints,表示轨迹上的点。然后,我们使用viewer.entities.add()方法创建了一个红色的轨迹实体,并将其添加到地图上。通过调整width参数可以改变轨迹的宽度,而leadTime和trailTime参数则分别控制轨迹的前导和尾迹时间
3.地理编码
如果你有一系列的地名或地址,并想要获取其对应的经纬度坐标,可以使用Cesium的地理编码功能。通过地理编码,你可以将地址转换为准确的坐标位置文章来源地址https://www.toymoban.com/news/detail-854950.html

var viewer = new Cesium.Viewer('cesiumContainer');  
var encodedAddress = '北京市朝阳区'; // 需要地理编码的地址或地名  
var request = {  
    address : encodedAddress, // 地址或地名字符串  
    resource : 'address' // 地理编码资源类型,这里使用地址编码资源类型(address)进行示范。如果使用地名编码资源类型(geocode),需要传递地名相关的参数。例如:{ name : '北京' }。此外,还可以选择其他资源类型(例如:postalCode、intersection等)。具体可参考Cesium官方文档。  
};  
viewer.geocoder.geocode(request).then(function(results) {  
    // 地理编码成功,获取地理编码结果(包含经纬度坐标等)  
    var position = results[0].position; // 获取第一个结果的经纬度坐标位置信息,返回一个Cesium.Cartesian3对象。如果有多于一个结果,可以根据实际需求进行筛选或处理。例如:results[0].entity 等。可以参考Cesium官方文档了解更多关于地理编码结果的信息。使用经纬度坐标信息进行后续操作,例如:绘制标记点、添加轨迹等。   
});

到了这里,关于前端使用Cesium加载三维模型全攻略的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HackTheGame游戏全攻略

    游戏链接 链接: 百度网盘 请输入提取码 提取码:bu1w HackTheGame游戏的玩法: 您将扮演一个黑客的角色,接受各种各样的任务,在不被发现的情况下,使用一些工具入侵他人的电脑,服务器并完成窃取资料,粉碎文件,植入病毒等操作.您有一共有两次机会,第三次被追踪到的话,您就会被捕

    2024年02月05日
    浏览(75)
  • Jenkins 插件安装方式全攻略

    在Jenkins 的安装向导页面中, 会有一步是否安装推荐的插件, 可以直接进行安装, 也可以跳过。 对于安装机器联网的状况, 安装插件相对方便,直接搜索插件安装, 但是也可能会出现无法在线安装的状况, 原因解析及解决方法 参考: Jenkins 在Windows下插件无法安装问题解

    2023年04月21日
    浏览(67)
  • Github搭建个人博客全攻略

    Github是开发者的代码仓库,一个开源和分享社区。 本文前提是已注册github账号。 假设用户名为MyName 进入个人主页(https://github.com/用户名),选择Repositories,点击New Repository name填入MyName.github.io,即MyName/ MyName.github.io ,点击Create Repository 安装Git或TortoiseGit(后者添加环境变量)

    2024年02月16日
    浏览(60)
  • 新手搭建服装小程序全攻略

    随着互联网的快速发展,线上购物已经成为了人们日常生活中不可或缺的一部分。服装作为人们日常消费的重要品类,线上化趋势也日益明显。本文将详细介绍如何从零开始搭建一个服装小程序商城,从入门到精通的捷径,帮助你快速掌握小程序商城的制作方法和技巧。 首先

    2024年02月21日
    浏览(47)
  • 谷歌账号注册流程全攻略

    一、访问谷歌账号注册页面 首先,你需要访问谷歌账号注册页面。你可以直接点击此链接,或者在谷歌首页点击右上角的“登录”按钮,在弹出的登录框中点击“创建帐号”。 在注册页面,你需要填写以下个人信息: 名字:输入你的名字。 姓氏:输入你的姓氏。 用户名:

    2024年02月05日
    浏览(55)
  • TortoiseSVN源码安装与迁移全攻略

    一、前言 随着版本控制系统的普及,越来越多的开发者和团队开始使用SVN(Subversion)来管理代码。本文将详细介绍TortoiseSVN的源码安装及迁移过程,帮助您轻松掌握这一版本控制工具。 二、TortoiseSVN源码安装 依赖环境安装,apr、apr-util、zlib、sqlite apr 环境   apr-util 环境 zl

    2024年01月24日
    浏览(58)
  • kaggle免费服务器全攻略

    1. kaggle服务器16G显卡一周40小时. 所以我们直接干一堆谷歌账号即可 2. 谷歌账号的注册: 我们需要FQcolab for windows可以做到. 然后我们注册好账号后.我们注册4个账号. 注册方法. 打开chrome   点最下面的添加按钮.然后一直下一步即可.无脑注册. 3.  为Chrome多账户添加单独的快捷方

    2024年02月16日
    浏览(47)
  • 开发巴西市场全攻略,外贸人收藏

    巴西联邦共和国位于南美洲东部,是南美洲资源最丰富,经济活力和经济实力最强的国家。巴西作为拉丁美洲的出口大国,一直是一个比较有潜力的市场,亦是我国外贸公司和独立外贸人集群的地方。 2021年巴西贸易概况 ✦ 1、2021年巴西贸易创纪录 2021年,巴西的对外贸易以

    2024年02月05日
    浏览(61)
  • SuperMap iObjects Docker打包全攻略

    说明 此教程编写时使用的iObjects版本为 10.2.1 ,理论高版本同样支持,具体自测。 基础镜像为 Docker 官方 ubuntu:16.04完整版 。(想换alpine自己折腾) 不同CPU架构都需要 重新打包 Dockerfile以安装相关LIB库(本教程以x64为例) 容器内部默认使用超图iObjects完整包内 自带的JRE (10

    2024年02月02日
    浏览(45)
  • 可视化大屏:mapbox+vue全攻略

    如题图,mapbox是一个支持真3D地形展示的webGIS框架,与常用的Leaflet、Cesium和Openlayers并称四大框架,本文将介绍mapbox-gl js 在 vue 中的用法。 各位可以自行搜索上面提到的或者其他的webGIS框架或者集成服务商,可以很轻松的比较出mapbox的优势: 支持3D地形、3D模型 支持多种坐标

    2023年04月24日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包