Cesium引入Three同步相机

原帖:https://blog.csdn.net/zhishiqu/article/details/79077883

源码:cesium-threejs-experiment

这个帖子讲述了如何在在Cesium引入Three,总结一下原理就是

  1. HTML中设置两个容器分别用于容纳Cesium与Three,且Three容器在Cesium容器下面,这样才能让Three产生的场景覆盖在Cesium上,并且禁用Three容器的鼠标事件,通过Cesium同步Three。
  2. 初始化Ceiusm,初始化Three(渲染器设置背景为透明,达成叠加效果),初始化物体并分别添加到各自的场景中
  3. 获取指定位置的坐标,将Three场景的坐标设置为指定位置的坐标,并设置朝向与top方向
  4. 关掉Three相机的自动更行,复制Cesium相机的fov与matrix并赋值给Three相机,更新Three相机,Cesium+Three同步

注意点

一、原帖中采用的Three源码为r87版本,基于原版本可以正常运行,如果切换为r87后的版本则会发现没有报错但是Cesium正常显示但是Three模型显示不出的问题

解决方案:r87版本中的object3D函数的lookAt方法的形参是vector3,后续版本的lookAt方法的形参是将vector3拆分成三个参数传入,所以更换为后续版本需要把源码中的lookat方法的实参进行改变才能正确显示。

二、Cesium与Three正常加载后,Cesium地图闪烁

解决方案:这个问题可能是因为Ceiusm与Three刷新不同步导致的,在项目中更新Cesium版本后未发现有闪烁现象,所以推测可能更新Cesium版本可以解决。

核心代码

        // 核心方法
        function renderThreeObj() {
            // register Three.js scene with Cesium
            three.camera.fov = Cesium.Math.toDegrees(cesium.viewer.camera.frustum.fovy) // 获取cesium相机角度并赋值给Three
            three.camera.updateProjectionMatrix();
            // 笛卡尔转矢量
            var cartToVec = function (cart) {
                return new THREE.Vector3(cart.x, cart.y, cart.z);
            };
            // 物体位置调整
            for (var id in _3Dobjects) {
                minWGS84 = _3Dobjects[id].minWGS84;
                maxWGS84 = _3Dobjects[id].maxWGS84;
                // 物体中心点坐标
                var center = Cesium.Cartesian3.fromDegrees((minWGS84[0] + maxWGS84[0]) / 2, (minWGS84[1] + maxWGS84[1]) / 2);
                // 物体顶部朝向坐标
                var centerHigh = Cesium.Cartesian3.fromDegrees((minWGS84[0] + maxWGS84[0]) / 2, (minWGS84[1] + maxWGS84[1]) / 2, 1);
                // y轴朝向
                var bottomLeft = cartToVec(Cesium.Cartesian3.fromDegrees(minWGS84[0], minWGS84[1])); // 指定平面左下角
                var topLeft = cartToVec(Cesium.Cartesian3.fromDegrees(minWGS84[0], maxWGS84[1])); // 指定平面左上角
                var latDir = new THREE.Vector3().subVectors(bottomLeft, topLeft).normalize(); // 指定平面左边向量
                // 物体位置调整
                _3Dobjects[id].threeMesh.position.copy(center); // 物体position更正
                _3Dobjects[id].threeMesh.lookAt(centerHigh.x, centerHigh.y, centerHigh.z); // z轴方向,即上方向,lookAt改传三个参数
                _3Dobjects[id].threeMesh.up.copy(latDir);   //指定y轴的朝向与平面左边平行,即模型朝向与平面左边朝向相同
            }
            //关闭相机自动更新
            three.camera.matrixAutoUpdate = false;
            // cesium相机位置
            var cvm = cesium.viewer.camera.viewMatrix;
            var civm = cesium.viewer.camera.inverseViewMatrix;
            // 同步Three相机位置设置
            three.camera.matrixWorld.set(
                civm[0], civm[4], civm[8], civm[12],
                civm[1], civm[5], civm[9], civm[13],
                civm[2], civm[6], civm[10], civm[14],
                civm[3], civm[7], civm[11], civm[15]
            );
            three.camera.matrixWorldInverse.set(
                cvm[0], cvm[4], cvm[8], cvm[12],
                cvm[1], cvm[5], cvm[9], cvm[13],
                cvm[2], cvm[6], cvm[10], cvm[14],
                cvm[3], cvm[7], cvm[11], cvm[15]
            );
            // 相机设置参数
            var width = ThreeContainer.clientWidth;
            var height = ThreeContainer.clientHeight;
            var aspect = width / height;
            three.camera.aspect = aspect;
            three.camera.updateProjectionMatrix(); // 相机参数更新
            // 渲染尺寸
            three.renderer.setSize(window.innerWidth, window.innerHeight);
            three.renderer.render(three.scene, three.camera); // 更新渲染
        }

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值