如何通过点击按钮，按dbId修改已加载模型的元素颜色？

Got it, let's walk through how to adjust your existing color modification feature to only run when a user clicks a button. Since you already have your models loaded and the dbId arrays ready, this is just a matter of wrapping your existing logic in a click handler. Here's a step-by-step breakdown:

1. Add a Button to Your UI #

First, let's add a simple button if you don't already have one in your HTML. This gives users a clear way to trigger the color change:

<button id="changeColorsBtn">Modify Element Colors</button>

2. Refactor Your Color Logic into a Reusable Function #

I'm assuming you already have code that changes colors by dbId—let's wrap that into a reusable function so we can call it on click. For example, if you're using Autodesk Forge Viewer, your function might look like this:

function applyCustomColors(viewer, dbIds, color) {
  // Optional: Reset existing theming to start fresh
  viewer.clearThemingColors();
  
  // Apply custom color to each target dbId
  dbIds.forEach(dbId => {
    viewer.setThemingColor(dbId, color);
  });
  
  // Refresh viewer to show updated colors
  viewer.impl.invalidate(true);
}

Note: Tweak this function to match your existing implementation—swap out viewer methods if you're using a different model viewing library.

3. Attach the Click Event Listener #

Now, connect your color function to the button's click event. Add this JavaScript code to link everything up:

// Wait for the DOM to fully load to avoid "element not found" errors
document.addEventListener('DOMContentLoaded', () => {
  // Grab the button element
  const colorBtn = document.getElementById('changeColorsBtn');
  
  // Define your target data (adjust these to your actual values)
  const model1DbIds = [123, 456, 789]; // First model's target dbIds
  const model2DbIds = [987, 654, 321]; // Second model's target dbIds
  const customColor = new THREE.Color(0xff0000); // Example: bright red
  
  // Add click handler
  colorBtn.addEventListener('click', () => {
    // Apply colors to both models (adjust if you need to target specific viewers)
    applyCustomColors(viewer1, model1DbIds, customColor);
    applyCustomColors(viewer2, model2DbIds, customColor);
    
    // Optional: Give user feedback
    alert('Element colors updated successfully!');
  });
});

Quick Tips for a Polished Experience #

• Toggle Functionality: If you want users to switch between custom colors and original colors, add a boolean flag to track the current state. On each click, either apply the custom color or clear the theming.
• Model Specificity: Make sure you're passing the correct viewer instance for each model's dbId array—this avoids applying colors to the wrong model.
• Error Handling: Add a quick check to ensure the viewer instances and dbId arrays are valid before running the color logic, just to catch edge cases.

内容的提问来源于stack exchange，提问作者Alisa Bondarchuk