原帖:https://blog.csdn.net/zhishiqu/article/details/79077883
源码:cesium-threejs-experiment
这个帖子讲述了如何在在Cesium引入Three,总结一下原理就是
- HTML中设置两个容器分别用于容纳Cesium与Three,且Three容器在Cesium容器下面,这样才能让Three产生的场景覆盖在Cesium上,并且禁用Three容器的鼠标事件,通过Cesium同步Three。
- 初始化Ceiusm,初始化Three(渲染器设置背景为透明,达成叠加效果),初始化物体并分别添加到各自的场景中
- 获取指定位置的坐标,将Three场景的坐标设置为指定位置的坐标,并设置朝向与top方向
- 关掉Three相机的自动更行,复制Cesium相机的fov与matrix并赋值给Three相机,更新Three相机,Cesium+Three同步
注意点
一、原帖中采用的Three源码为r87版本,基于原版本可以正常运行,如果切换为r87后的版本则会发现没有报错但是Cesium正常显示但是Three模型显示不出的问题
解决方案:r87版本中的object3D函数的lookAt方法的形参是vector3,后续版本的lookAt方法的形参是将vector3拆分成三个参数传入&