Cessium调整模型的位置、高度、旋转

最新推荐文章于 2024-08-11 23:56:23 发布
最新推荐文章于 2024-08-11 23:56:23 发布
阅读量3k 收藏 6
点赞数 1
分类专栏： AboutCesium
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tmraz/article/details/114835329
版权

说结果

调整位置和高度没问题，旋转有的可以有的不可以。
网上有很多方法，针对不同软件生成的3dtiles服务，有的可以有的不可以，与其说别人给的方法不对，不如说自己该去补补数学、图形学知识了。

说方案

方法一

/**
 * 调高度官方方法
 * @param {*} tileset
 * @param {Object} [params] 对象有如下属性:
 * @param {Object} [params.height] 偏移高度（单位：米）
 */
export function adjust3DTile(
  tileset,
  params = { height: 0 }
) {
  const cartographic = Cesium.Cartographic.fromCartesian(
    tileset.boundingSphere.center
  );
  const surface = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    0.0
  );
  const offset = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude
    params.height
  );
  const tranlation = Cesium.Cartesian3.subtract(
    offset,
    surface,
    new Cesium.Cartesian3()
  );

  tileset.modelMatrix = Cesium.Matrix4.fromTranslation(tranlation);
}

方法二

/**
 * 平移、贴地、旋转模型，白膜有效，倾斜摄影无效(目前只验证过cesiumlab处理的3dtiles数据，其他工具处理的数据有待验证。)
 * @param {*} tileset
 * @param {Object} [params] 对象有如下属性:
 * @param {Object} [params.tx] 模型中心X轴坐标（经度，单位：十进制度）
 * @param {Object} [params.ty] 模型中心Y轴坐标（纬度，单位：十进制度）
 * @param {Object} [params.tz] 模型中心Z轴坐标（高程，单位：米）
 * @param {Object} [params.rx] X轴（纬度）方向旋转角度（单位：度）
 * @param {Object} [params.ry] Y轴（纬度）方向旋转角度（单位：度）
 * @param {Object} [params.rz] Z轴（高程）方向旋转角度（单位：度）
 */
export function update3dtilesMaxtrix(tileset, params) {
  //旋转
  let mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
  let my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
  let mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
  let rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
  let rotationY = Cesium.Matrix4.fromRotationTranslation(my);
  let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
  //平移
  let position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
  let m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  //旋转、平移矩阵相乘
  Cesium.Matrix4.multiply(m, rotationX, m);
  Cesium.Matrix4.multiply(m, rotationY, m);
  Cesium.Matrix4.multiply(m, rotationZ, m);
  //赋值给tileset
  tileset._root.transform = m;
}

// 缩放
 var scale = Cesium.Matrix4.fromUniformScale(0.6)
        Cesium.Matrix4.multiply(m, scale, m)

//https://hqcode.gitee.io/cesium-test/lesson03/
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
        @import url(../Build/CesiumUnminified/Widgets/widgets.css);
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .canvas {
        position: absolute;
        left: 10px;
        top: 10px;
        display:none;
    }
    #canvas-a {
        top: 10px;
    }
    #canvas-b {
        top: 120px;
    }
    </style>
</head>

<body>
    <button onClick ="rotatex()">rotatex</button>
    <button onClick ="rotatey()">rotatey</button>
    <button onClick ="rotatez()">rotatez</button>
    <div id="cesiumContainer" class="fullSize">
        <div id="cesiumxin" style="position:fixed;left:0;z-index:99"><a href="http://cesium.xin" style="color:aliceblue;text-decoration:none">cesium中文网 http://cesium.xin </a></div>
    </div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', 
        {
            imageryProvider: new Cesium.SingleTileImageryProvider({
               url: '../img/worldimage.jpg'
            }),

            homeButton: false,
            //sceneModePicker: false,
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            timeline: false,
            fullscreenButton: false,
            vrButton: false
        });
        
        var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url : 'Tileset/tileset.json',
            modelMatrix:Cesium.Matrix4.IDENTITY 
        }));

        tileset.readyPromise.then(function() {
            var boundingSphere = tileset.boundingSphere;
            viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius * 2));
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        }).otherwise(function(error) {
            throw(error);
        });

        var m = tileset.modelMatrix;

        var anglex = 1;
        function rotatex(){
            anglex += 1;
            let m1 = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(anglex));   
            tileset.modelMatrix = Cesium.Matrix4.multiplyByMatrix3(m,m1,new Cesium.Matrix4());
        }

        var angley = 1;
        function rotatey(){
            angley += 1;
            let m1 = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(angley));   
            tileset.modelMatrix = Cesium.Matrix4.multiplyByMatrix3(m,m1,new Cesium.Matrix4());
        }

        var anglez = 1;
        function rotatez(){
            anglez += 1;
            let m1 = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(anglez));   
            tileset.modelMatrix = Cesium.Matrix4.multiplyByMatrix3(m,m1,new Cesium.Matrix4());
        }

    </script>
</body>

</html>

参考文章

https://github.com/CesiumGS/cesium/issues/7633
https://community.cesium.com/t/is-there-is-a-way-to-rotate-the-the-3d-tile-model/5774/4
https://www.cnblogs.com/pumpkin-123/p/11930271.html
https://www.cnblogs.com/huqi-code/p/8288239.html
http://cesium.xin/wordpress/archives/106.html

ES6 函数参数初始化

function test4({x,y}={x:100,y:200}) {
  console.log(x,y);
}

test4({}); // undefined undefined
test4(); // 100 200
leemraz
关注
专栏目录
17.（cesium之家）cesium调整倾斜摄影位置（高度，平移，旋转，缩放）
地图之家
09-10 1138
17.（cesium之家）cesium调整倾斜摄影位置（高度，平移，旋转，缩放）
Cesium：3DTiles三维模型高度调整
席木木的博客
01-10 2764
Cesium：3DTiles三维模型高度调整及示例代码。
Cesium 动态改变模型的高度
qq_34799366的博客
07-30 2520
var viewModel = { height: 0, }; Cesium.knockout.track(viewModel); var toolbar = document.getElementById("toolbar");//绑定input外的元素的id Cesium.knockout.applyBindings(viewModel, toolbar);//height和input做绑定 var tileset = new Cesium.Cesium3DTileset({ url: "
Cesium倾斜相机视角观察物体
最新发布
lzhlzhlzh_lzh的博客
08-11 395
我们算出来需要平移x距离，x单位是米（因为h单位是米），而相机的位置的以经纬度确认的，因此需要做米到经纬度的转换，这里不必赘述，请看我之前的。回忆一下高中的知识，在直角三角形中，已知了一个角α和边h，可以求x。cesium的api提供了倾斜相机视角的配置，但是直接使用cesium的api不能达到我们想要的效果。在cesium中，我们有时需要倾斜相机视角去观察物体，如相机俯视45观察物体。，将相机偏移了-45度，因此物体超出了相机的视野，我们也就看不到物体了。原因很简单，我们看到了视野都是相机的视野。
Cesium16-Cesium三维模型高度调整
m0_56492004的博客
03-19 1350
原始数据如果存在高程数据，生产的3DTileset模型数据也会存在高程数据，不过可能由于原始高程数据不准确，造成模型浮空，这时我们就需要对模型进行高度调整。
Cesium 调整3dtiles模型高度
资深三维GIS开发
04-30 6466
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: 'http://data.marsgis.cn/3dtiles/qx-changfang/tileset.json' })); viewer.scene.primitives.add(tile...
cesium terrain builder 瓦片地形生成器
11-08
这种数据通常通过激光雷达（LiDAR）或卫星遥感获取，然后以数字高程模型（DEM）的形式存储。Cesium Terrain Builder将这些高程数据转换为Cesium能直接使用的格式。 5. **Cesium加载高程数据**：Cesium支持多种地形...
cesium move鼠标在三维地球移动获取 经度、纬度、视角高、海拔 三维坐标转二维
weixin_42448623的博客
09-19 1419
获取 AccessToken 思路 监听 鼠标在 三维界面的移动 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
Cesium 3dtileConvert工具，可把osgb转换为3dtiles，类似cesiumlab的功能
07-20
Cesium 3DTileConvert工具是一款强大的转换软件，专门用于将三维模型数据格式OSGB（Open Scene Graph Binary）转换成Cesium支持的3DTiles格式。3DTiles是一种高效的网络分发和渲染大规模3D地理空间数据的标准，由...
cesium面积计算_Cesium面积测量之思路解析加源码
weixin_29696567的博客
01-13 1365
如果你看过我的距离量测文章，那么我相信，面积也是你需要测量的吧，那就看看吧。一、实现思路首先我们需要用到的鼠标移动事件、单击事件和双击事件，具体功能如下：1，鼠标移动事件：判断是否开始进行测量操作(单击为开始标志)，如果没有，则什么也不做，如何开始则需要把单击的坐标作为起点，鼠标当前位置作为终点画面，随着鼠标的移动需要不停的刷新面。2，单击事件：将测面状态更新为真，当点击次数大于俩次，开始绘制面，...
Cesium示例程序学习和讲解(4)-调整3DTiles模型高度
qq_32077521的博客
03-12 1477
在三维场景中如何加载3dtiles模型，如何调整模型在场景中的高度
Cesium 之加载倾斜摄影3d模型（解决倾斜漂移问题）
wokao253615105的专栏
03-19 6656
以Cesium3DTileset方式加载服务发布的倾斜摄影静态资源Json文件，参考如下： item.url='倾斜摄影的json地址/tileset.json'; let tileset = window.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: item.url, // modelMatrix: Cesium.Matrix4.fromArray([1, 0, 0, 0, 0, 1, ...
Cesium
qq_42046017的博客
08-31 331
它是Cesium展示三维要素内容的主要窗口，它不仅仅是包含三维地图的视窗，还包含了一些基础控件，在定义Viewer对象的同时需要设定基础部件、图层等的初始化状态。
cesium中倾斜摄影偏移
ou_change的博客
08-01 634
cesium中倾斜摄影偏移。
Cesium中对Cesium.Cesium3DTileset模型进行偏移
webMinStudent的博客
11-29 1208
但是很多时候，我们添加的3D Tiles 模型他的位置，并不是我们想要的位置。由于单个瓦片的位置信息是写到了数据中的(.b3dm 和对应的 json 文件中), 如果能整体调整加载后的 Tileset，就是最好的选择。3DTiles 数据集以分块，分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的渲染压力。这里面说，一个三维场景中，要包含：视图矩阵，投影矩阵，模型矩阵。模型矩阵: 就包含了，这个模型的各种变换，平移，旋转，缩放。这三个矩阵也有统称为: MVP矩阵。
Cesium中的lookAt/lookAtTransform/setView/zoomTo
qq_52133989的博客
03-24 2494
摆相机喽
Cesium 影像纠偏
苹果园dog
01-26 2138
可通过 Cesium.ImageryProvider 的 tilingScheme 进行设置。 WGS84、火星坐标系、2000等坐标系的坐标动态变换。
cesium模型的旋转、平移和缩放带辅助操作
热门推荐
weixin_44265800的博客
10-13 1万+
cesium模型的旋转、平移和缩放 带辅助轴线
cesium 3dtiles地形遮挡、设置离地高度
mkbbreak的博客
06-27 2076
在开启后加载3dtiles数据会导致被地形遮挡，导致3d tiles数据看不见。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值