Cesium系列:加载单个模型

本文涉及的产品
交互式建模 PAI-DSW,5000CU*H 3个月
简介: Cesium如何加载单个三维模型数据

Cesium支持加载单个三维模型,常用的模型格式为:gltf,glb,这些模型都可以从3dmax、obj等三维模型的格式转换过来,Cesium的官方网站也列举了加载单个三维模型的方式,根据详细的代码列举一下。
image.png
详细的代码在Cesium示例:3D Models.html页面中

样例的模型文件在:SampleData的文件夹中

以下是加载模型的详细代码:

//位置信息,x、y、高度信息

      var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);

     //模型的三个方向转角,在三维立体空间中的三个转角方向,可以参见上图

//的小飞机示意图(其中direction对应heading ,tilt对应pitch)

    var heading = Cesium.Math.toRadians(135);

    var pitch = 0;

    var roll = 0;

    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

 //要根据位置和设置的转角信息做一个转换

    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

//单个对象一般都放在实体中,添加一个实体对象

    var entity = viewer.entities.add({

 //设置位置和转向信息

        name : url,

        position : position,

        orientation : orientation,

        model : {

          //模型的路径

            uri : url,

          //模型的比例

           scale:1.0,

         //最小的像素尺寸

            minimumPixelSize : 128,

         //最大显示比例

            maximumScale : 20000

        }

    });

模型的加载效果,代码使用时,去掉注释信息:
image.png

相关文章
|
前端开发
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
1868 0
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
|
20天前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
64 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
20天前
|
存储
THREEJS实战6_加载fbx模型
THREEJS实战6_加载fbx模型
110 1
|
10月前
Threejs加载OBJ模型
Threejs加载OBJ模型
141 0
|
JSON 算法 数据可视化
⚡Three.js-在场景中导入3D动画模型
⚡Three.js-在场景中导入3D动画模型
46990 4
⚡Three.js-在场景中导入3D动画模型
|
11月前
|
Web App开发 算法 前端开发
Cesium开发: Draco模型压缩
Cesium开发: Draco模型压缩
414 1
|
11月前
|
定位技术 API
Cesium开发:关于加载CGCS2000切片
Cesium开发:关于加载CGCS2000切片
447 0
|
11月前
|
JSON 数据格式
Cesium开发:模型的CZML文件
Cesium开发:模型的CZML文件
321 0
|
12月前
|
存储
threejs实战_加载fbx模型
threejs实战_加载fbx模型
380 0
threejs实战_加载fbx模型
|
JSON 前端开发 定位技术
Leaflet开发:webgl方式加载point
Leaflet开发:webgl方式加载point
197 0
Leaflet开发:webgl方式加载point