01.cesium中三维模型加载

周星星日记

已于 2024-04-12 06:53:22 修改

阅读量1k

点赞数 1

分类专栏： cesium集合文章标签： javascript 前端 cesium

于 2024-04-11 17:40:19 首次发布

本文链接：https://blog.youkuaiyun.com/sky___Show/article/details/137646862

版权

cesium集合专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用Cesium库在Web应用中配置和加载3D场馆模型，包括设置经纬度、角度、模型URL和加载流程。还展示了如何创建一个封装类来简化操作并处理模型加载回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先看展示示例

在这里插入图片描述

实现步骤

1.配置好参数

  CesiumMapRef.value.addVenue({
    id: "",
    createTime: "",
    modifyTime: "",
    name: "国博中心",
    angle: 30,
    longitude: 106.537751,
    latitude: 29.721438,
    scale: 1.0,
  });
const addVenue = () => {
	 let url = "/data/gbzx-01.gltf"; //模型地址
      options.url = url;
      options.locking = true;
      options.isBuilding = true;
      new venueObj(this.cesium_viewer, options);
}

2.创建3D场馆封装类

export default class venueObj {
  constructor(viewer, options) {
    this.viewer = viewer;

    this.callback = options.callback || function () {};
    //初始化
    this.init(options);
  }
  init(options) {
    if (!options) return false;

    /**
     * 鼠标事件
     */
    // this.handler = new Handler(this.viewer);
    
	//设置好经纬度
    const position = Cesium.Cartesian3.fromDegrees(
      options.longitude,
      options.latitude
    );
	
    const heading = Cesium.Math.toRadians(options.angle); //水平旋转
    const pitch = Cesium.Math.toRadians(0);
    const roll = Cesium.Math.toRadians(0);
    let headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    let orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      headingPitchRoll
    );

    // console.log('[ options ] >', options)
    var entity = this.viewer.entities.add({
      locking: options.locking,
      isBuilding: options.isBuilding,
      name: options.name,
      position: position,
      orientation: orientation,

      model: {
        uri: options.url,
        scale: options.scale || 1,
        show: true,
      },
    });
    // viewer.scene.primitives.add(entity);

    // 模型加载
    var _this = this;
    Cesium.requestAnimationFrame(function () {
      _this.viewer.dataSourceDisplay.defaultDataSource._visualizers
        .reduce(function (a, b) {
          // console.log(`model iooikjkoj has loaded.`, a , b);
          return a instanceof Cesium.ModelVisualizer ? a : b;
        })
        ._modelHash[entity.id].modelPrimitive.readyPromise.then(function () {
          console.log(`model ${options.name} has loaded.`);
          _this.callback("loaded");
        });
    });
  }
}