Cesium系列:加载单个模型

本文涉及的产品
模型在线服务 PAI-EAS,A10/V100等 500元 1个月
模型训练 PAI-DLC,100CU*H 3个月
交互式建模 PAI-DSW,每月250计算时 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

相关文章
|
4月前
|
JavaScript
Threejs加载MMD
这篇文章详细介绍了如何在Three.js中加载和使用MMD(MikuMikuDance)模型,包括模型的导入、动画的播放以及与MMD相关的文件格式和操作流程。
95 2
Threejs加载MMD
|
4月前
ThreeJs设置模型的边线
这篇文章介绍了如何在Three.js中为3D模型添加边线效果,并提供了实现这一功能的代码示例。
74 2
|
6月前
|
Web App开发 JSON JavaScript
WebGL简易教程(十五):加载gltf模型
WebGL简易教程(十五):加载gltf模型
209 1
|
6月前
|
JavaScript 前端开发 数据格式
Cesium案例解析(四)——3DModels模型加载
Cesium案例解析(四)——3DModels模型加载
350 0
|
6月前
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
171 0
|
9月前
|
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
1260 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
9月前
|
存储
THREEJS实战6_加载fbx模型
THREEJS实战6_加载fbx模型
894 1
|
JSON 算法 数据可视化
⚡Three.js-在场景中导入3D动画模型
⚡Three.js-在场景中导入3D动画模型
47235 4
⚡Three.js-在场景中导入3D动画模型
|
Web App开发 算法 前端开发
Cesium开发: Draco模型压缩
Cesium开发: Draco模型压缩
597 1

热门文章

最新文章