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

npm install cesium
或者
yarn add 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));

// 定义碰撞器的位置和尺寸  
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); // 将碰撞器添加到场景中显示出来。

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

// 定义轨迹的坐标点数组  
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  
    }  
});

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