前端如何使用Cesium加载三维模型详细攻略_Javascript

前言

想象一下，地球在你眼前旋转，上面还有各种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的地理编码功能。通过地理编码，你可以将地址转换为准确的坐标位置

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官方文档了解更多关于地理编码结果的信息。使用经纬度坐标信息进行后续操作，例如：绘制标记点、添加轨迹等。   
});