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拆分成三个参数传入&

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值