Cesium与Threejs结合

The basic rendering principles guiding Cesium are not so different from Three.js. Three.js is a powerful 3D library for rendering 3D objects. By duplicating Cesium’s spherical coordinate system and matching digital globes within both scenes, it is easy to integrate both separate rendering engine layers into one main scene. I will give a simple illustration about its integration method, as follows:

Cesium的基本渲染原理与Three.js并没有很大不同。Three.js是一个渲染3D物体的强大的3D类库。通过复制Cesium椭球坐标系以及匹配两个Scene场景的数字球体，很容易融合两个不同的渲染引擎到一个场景中。我将对该融合方法给予简单说明，如下：

初始化铯渲染器，
初始化three.js渲染器，
初始化两个库的3D对象，以及
循环渲染器。

A small experiment using Three JS on Cesium to emulate a combined scene.

在Cesium上使用Three JS的小实验。

https://github.com/CesiumGS/cesium-threejs-experiment

https://cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/

>>Cesium安装：https://www.cnblogs.com/2008nmj/p/11226838.html

Main Function主要函数

The html needs containers for Three and for Cesium:html需要Three和Cesium的两个容器：

<body>
<div id="cesiumContainer"></div>
<div id="ThreeContainer"></div>
</body>
<script> main(); </script>

This is the main function:以下是main函数：

function main(){
  // boundaries in WGS84 to help with syncing the renderers
  var minWGS84 = [115.23,39.55];
  var maxWGS84 = [116.23,41.55];
  var cesiumContainer = document.getElementById("cesiumContainer");
  var ThreeContainer = document.getElementById("ThreeContainer");

  var _3Dobjects = []; //Could be any Three.js object mesh
  var three = {
    renderer: null,
    camera: null,
    scene: null
  };

  var cesium = {
    viewer: null
  };

  initCesium(); // Initialize Cesium renderer
  initThree(); // Initialize Three.js renderer
  init3DObject(); // Initialize Three.js object mesh with Cesium Cartesian coordinate system
  loop(); // Looping renderer
}

更多参考：https://blog.csdn.net/qq_36266612/article/details/88943501(CesiumJs+ThreeJs实测)