Cesium中正确销毁Viewer的方法及销毁后模型无法加载问题

Hey there! Let's figure out why your model isn't showing up after you destroy and recreate the Cesium Viewer—this is a common gotcha with Cesium's resource management.

What's Going Wrong? #

When you call viewer.destroy(), Cesium cleans up a lot of internal resources like the WebGL context, cached assets, and event listeners. But the issue here is likely one of these:

• You're reusing old Entity objects or model resource references that were already cleaned up during destruction.
• The Viewer's container isn't properly reset before creating a new instance, leaving leftover DOM elements or state.
• Model loading caches aren't being cleared, so Cesium thinks the model is already loaded (but the associated resources are gone).

Solutions to Try #

1. Don't Destroy the Viewer—Just Hide It

If your goal is only to show/hide the Viewer, destroying and recreating it is overkill. Instead, just toggle the container's visibility:

// Hide the Viewer
document.getElementById('cesiumContainer').style.display = 'none';

// Show it again
document.getElementById('cesiumContainer').style.display = 'block';

This avoids all the resource cleanup headaches entirely, since the Viewer stays intact in the background.

2. Properly Clean Up and Reinitialize

If you must destroy and recreate the Viewer, follow these steps to ensure a fresh state:

• Clear the Viewer reference and container: After destroying, nullify the Viewer instance and empty its container to remove leftover DOM.
• Recreate all entities from scratch: Never reuse old Entity objects—always create new ones with fresh model URLs when reinitializing.

Here's a full example:

let viewer = new Cesium.Viewer('cesiumContainer');

// Function to hide and clean up the Viewer
function hideViewer() {
  if (viewer) {
    viewer.entities.removeAll();
    viewer.destroy();
    viewer = null; // Clear the reference
    // Empty the container to reset DOM state
    const container = document.getElementById('cesiumContainer');
    container.innerHTML = '';
    container.style.display = 'none';
  }
}

// Function to recreate and show the Viewer
function showViewer() {
  const container = document.getElementById('cesiumContainer');
  container.style.display = 'block';
  
  // Create a brand new Viewer instance
  viewer = new Cesium.Viewer('cesiumContainer');
  
  // Re-add your point features (fresh instances)
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    point: { pixelSize: 12, color: Cesium.Color.ORANGE }
  });
  
  // Re-add the model with a fresh URI reference
  const modelEntity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    model: {
      uri: './assets/your-model.gltf', // Use the full, correct path
      scale: 0.5
    }
  });
  
  // Add error logging to debug model loading
  modelEntity.model.readyPromise
    .then(() => console.log('Model loaded successfully!'))
    .catch(err => console.error('Model failed to load:', err));
}

3. Debug Model Loading Errors

If the model still isn't loading, add the readyPromise catch handler like in the example above. This will tell you exactly what's wrong—whether it's a broken file path, corrupted model, or resource permission issue.

Why This Works #

By nullifying the Viewer reference and emptying the container, you ensure no leftover state from the old instance interferes with the new one. Creating fresh Entity and model objects guarantees Cesium loads the model from scratch instead of trying to reuse already-cleaned resources.

内容的提问来源于stack exchange，提问作者Sasha Kos