cesiumjs-with-threejs

This template project demonstrates how to combine the powerful geospatial visualization capabilities of CesiumJS with the versatile 3D rendering capabilities of Three.js. Use this template when you need both Cesium's advanced geospatial features and Three.js's general 3D rendering functionalities.

How it works:

• Stack two HTML canvases on top of eachother
• Assign one canvas to Cesium and the other to Three
• Synchronize the cameras
• Cesium's camera is the one the user manipulates
• Draw globe and buildings in Cesium
• Draw everything else in Three (template uses a rotating cube)

Run the app:

• npm install
• npm run dev

Limitations:

• We just draw the Three canvas onto the Cesium canvas
• 3D objects in Cesium (e.g. buildings) that are in front of objects in Three (cube) are not displayed correctly
• The cube in the image is actually positioned behind the building