使用Cesium框架实现全景图

Posted 2023-04-23

参考技术A 最近几日由于工作中需要把全景图加载到三维场景中，之前网上搜索过，做过的都是结合其他框架来实现，如PhotoSphereViewer。但是当我们需要在Cesium做的项目中，来做数据显示增强的时候（如：点云和全景图叠合）就显得力不从心了，毕竟PhotoSphereViewer是基于threejs来实现的，需要一起来显示的时候就需要控制Cesium的相机和threejs的相机。因此为了更加有效的实现Cesium中场景与全景图完美叠合，就需要Cesium加载全景图。可能我说的叠合有点抽象，那么我用一张图来解释一下。

和点云数据叠合有个好处就是点云数据拉近看的时候，点云比较稀疏看不清形状，这个时候结合全景图，就能更加清晰的呈现出模型本身。

那么如何实现cesium中加载全景图呢？其实很简单，总结为如下几步：

1、使用EllipsoidGeometry绘制一个球

2、给这个球贴上纹理，由于我们贴的时候一般都贴到球的表面，但是我们看的时候视角是从球里面往外面看的，所以需要对纹理做一个反转

3、固定相机位置为球的中心点，这样就可以绕着这个点往四周看了

我这里把使用的贴纹理的shader贴出来供大家参考：

最后附一张叠合的效果图：

threejs7 实现背景图和360全景图的加载

import { BufferGeometry, DirectionalLight, HemisphereLight, SphereBufferGeometry, TextureLoader,CubeTextureLoader } from "three";
scene.background = new TextureLoader().load("../assets/bg3.jpg")

效果图2：

代码2：

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { AxesHelper, DirectionalLight, HemisphereLight, SphereBufferGeometry, SphereGeometry, TextureLoader } from "three";
import{MTLLoader} from "three/examples/jsm/loaders/MTLLoader"
import{OBJLoader}from "three/examples/jsm/loaders/OBJLoader"
import{GLTFLoader}from "three/examples/jsm/loaders/GLTFLoader"

var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色

window.addEventListener("resize", () => {//窗口大小变化事件
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    //设置了aspect  必须更新相机的投影矩阵
    camera.updateProjectionMatrix();
})

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 2, 6)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();

scene.background = new THREE.CubeTextureLoader()
    .setPath( "../assets/textures/cubeMaps/")
    .load( [
        'posx.jpg',
        'negx.jpg',
        'posy.jpg',
        'negy.jpg',
        'posz.jpg',   
        'negz.jpg'
    ] );

var dirLight=new DirectionalLight(0xffffff);
dirLight.intensity=2;
var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);
scene.add(dirLight);
// scene.add(new AxesHelper(1000));

update()
function update() {
    console.log('刷新')
    renderer.render(scene, camera);
    requestAnimationFrame(update);//不会卡塞，专门针对图形渲染刷新的方法
}

//-------------------------模型加载--------------------------------
var gltfLoader=new GLTFLoader();
gltfLoader.load("../assets/models/glTF/wuren.glb",(glb)=>{
// glb.setSize.set(10,10,10);
glb.scene.x=-10;
    scene.add(glb.scene);
});