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實測)