Cesium与Three.js，如何结合使用这两个强大的库进行3D可视化开发？

cesium three.js

一、Cesium+Three.js 实现原理

Cesium和Three.js都是基于WebGL技术，使用JavaScript开发的开源三维可视化框架，Cesium专注于地理空间数据的展示，如卫星影像、地形等，而Three.js则是一个通用的3D渲染库，适用于各种3D场景的构建，将两者结合可以实现地理空间数据与复杂3D模型的无缝融合。

实现步骤

设置容器：在HTML中设置两个容器分别容纳Cesium和Three.js。

视图层分离：使Three.js的场景覆盖在Cesium之上，并禁用Three.js容器的鼠标事件，通过Cesium同步控制Three.js。

初始化渲染器：分别对Cesium渲染器和Three.js渲染器进行初始化，通过禁用Cesium的默认渲染循环，可以将其动画帧与Three.js同步。

坐标转换：进行坐标转换，使对象在地球上正确显示，这包括将大地纬度/经度位置转换为笛卡尔XYZ坐标。

循环渲染：请求关键帧并循环渲染器，保持场景的动态更新。

二、VUE3+Cesium项目创建

项目创建步骤

安装依赖：确保已安装Node.js和npm，然后执行以下命令安装所需的依赖包。

   npm install vue@next cesium three --save

创建项目：使用Vue CLI创建一个新的Vue 3项目。

   vue create my-cesium-three-project
   cd my-cesium-three-project

配置Cesium：在public/index.html中引入Cesium的CSS和JS文件。

   <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css">
   <script src="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Cesium.js"></script>

配置Three.js：安装Three.js后，可以在组件中直接引入和使用。

三、导入Three.js

安装Three.js

   npm install three --save

初始化Three.js

   import * as THREE from 'three';
   const scene = new THREE.Scene();
   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
   const renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);
   const geometry = new THREE.BoxGeometry();
   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
   const cube = new THREE.Mesh(geometry, material);
   scene.add(cube);
   camera.position.z = 5;
   function animate() {
     requestAnimationFrame(animate);
     cube.rotation.x += 0.01;
     cube.rotation.y += 0.01;
     renderer.render(scene, camera);
   }
   animate();

四、实现VUE3+Cesium+Three.js

项目结构

src/
├── components/
│   └── MapContainer.vue
├── App.vue
├── main.js
└── ...

MapContainer.vue

<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
  <div id="threeContainer" ref="threeContainer"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import * as THREE from 'three';
let cesium = null;
let three = {
  scene: null,
  camera: null,
  renderer: null,
};
onMounted(() => {
  initCesium();
  initThree();
  loop();
});
function initCesium() {
  cesium = new Cesium.Viewer('cesiumContainer', {
    useDefaultRenderLoop: false,
    selectionIndicator: false,
    homeButton: false,
    sceneModePicker: false,
    infoBox: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
  });
}
function initThree() {
  three.scene = new THREE.Scene();
  three.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  three.renderer = new THREE.WebGLRenderer({ alpha: true });
  three.renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('threeContainer').appendChild(three.renderer.domElement);
}
function loop() {
  if (cesium && three) {
    cesium.scene.frameNumber++;
    three.renderer.render(three.scene, three.camera);
    requestAnimationFrame(loop);
  }
}
</script>

App.vue

<template>
  <div id="app">
    <MapContainer />
  </div>
</template>

main.js

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

五、相关问题与解答

1. 为什么Cesium和Three.js需要两个独立的Canvas容器？

解答：Cesium和Three.js各自管理自己的渲染循环和场景，为了避免冲突并确保性能，通常将它们放在两个独立的Canvas容器中，这样可以更好地控制各自的渲染流程，并通过CSS定位来实现叠加效果，独立容器也便于调试和维护。

2. 如何在Three.js中实现物体的旋转动画？

解答：在Three.js中实现物体的旋转动画，可以通过修改对象的rotation属性，并在每一帧中更新这些属性来实现，可以使用requestAnimationFrame来创建一个循环，不断改变对象的旋转角度，从而实现动画效果，以下是一个简单的示例代码：

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

各位小伙伴们，我刚刚为大家分享了有关“cesium three.js”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！