如何通过Autodesk Forge API在A360 Viewer中为装配体组件添加点击跳转超链接

Great question! Implementing direct click/touch navigation from A360 Viewer components to external URLs is totally doable using the Forge Viewer's event system—no need to rely on the property sheet. Here's a step-by-step solution that works for both desktop clicks and mobile touches:

Core Approach #

We'll leverage the Viewer's SELECTION_CHANGED_EVENT to detect when a component is clicked/touched, retrieve the associated URL (either from the component's custom properties or a predefined lookup map), and trigger a navigation to that URL. We'll also add optional hover feedback to indicate interactive components.

Step 1: Prepare Your Model (Optional but Recommended) #

First, store the target URL directly in your component's properties so the Viewer can access it:

• In Fusion 360/Inventor, add a custom parameter (e.g., named ComponentURL) to each component and set its value to the desired web address.
• Upload the model to Forge as usual—these custom properties will be included in the model's metadata.

Step 2: Implement the Viewer Event Listeners #

After initializing the Forge Viewer, add these event handlers to handle selection and hover:

Initialize the Viewer & Add Event Listeners #

// Assume viewer is already initialized (replace with your Viewer setup code)
function initializeViewer(containerId, documentId) {
  const options = {
    env: 'AutodeskProduction',
    getAccessToken: (callback) => {
      // Replace with your token retrieval logic
      callback('YOUR_ACCESS_TOKEN', 3600);
    }
  };

  Autodesk.Viewing.Initializer(options, () => {
    const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById(containerId));
    viewer.start();

    Autodesk.Viewing.Document.load(documentId, (doc) => {
      const viewables = doc.getRoot().getDefaultGeometry();
      viewer.loadDocumentNode(doc, viewables).then(() => {
        // Add event listeners AFTER the model is loaded
        addComponentNavigation(viewer);
      });
    }, (err) => {
      console.error('Failed to load document:', err);
    });
  });
}

function addComponentNavigation(viewer) {
  // Handle component selection (click/touch)
  viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (event) => {
    if (event.dbIdArray.length === 0) return; // Ignore deselection
    const selectedDbId = event.dbIdArray[0];

    // Fetch component properties to get the stored URL
    viewer.getProperties(selectedDbId, (props) => {
      const urlProperty = props.properties.find(p => p.displayName === 'ComponentURL');
      if (urlProperty && urlProperty.value) {
        // Open URL in a new tab
        window.open(urlProperty.value, '_blank');
        // Clear selection to avoid accidental re-clicks
        viewer.clearSelection();
      }
    });

    // --- Alternative: Use a predefined lookup map (if you don't want to edit model properties) ---
    // const urlMap = {
    //   123: 'https://example.com/component-details/1',
    //   456: 'https://example.com/component-details/2'
    // };
    // const targetUrl = urlMap[selectedDbId];
    // if (targetUrl) {
    //   window.open(targetUrl, '_blank');
    //   viewer.clearSelection();
    // }
  });

  // Add hover feedback to indicate interactive components
  viewer.addEventListener(Autodesk.Viewing.MOUSE_HOVER_EVENT, (event) => {
    const hoveredDbId = event.dbId;
    if (hoveredDbId) {
      viewer.getProperties(hoveredDbId, (props) => {
        const hasUrl = props.properties.some(p => p.displayName === 'ComponentURL' && p.value);
        // Change cursor to pointer if component has a URL
        viewer.container.style.cursor = hasUrl ? 'pointer' : 'default';
        // Optional: Show a tooltip
        if (hasUrl) {
          showTooltip(event.clientX, event.clientY, 'Click for more info');
        } else {
          hideTooltip();
        }
      });
    } else {
      viewer.container.style.cursor = 'default';
      hideTooltip();
    }
  });
}

// Simple tooltip helper functions
function showTooltip(x, y, text) {
  let tooltip = document.getElementById('viewer-tooltip');
  if (!tooltip) {
    tooltip = document.createElement('div');
    tooltip.id = 'viewer-tooltip';
    Object.assign(tooltip.style, {
      position: 'absolute',
      backgroundColor: 'rgba(0,0,0,0.8)',
      color: '#fff',
      padding: '8px 12px',
      borderRadius: '4px',
      zIndex: '10000',
      fontSize: '14px',
      pointerEvents: 'none'
    });
    document.body.appendChild(tooltip);
  }
  tooltip.textContent = text;
  tooltip.style.left = `${x + 15}px`;
  tooltip.style.top = `${y + 15}px`;
  tooltip.style.display = 'block';
}

function hideTooltip() {
  const tooltip = document.getElementById('viewer-tooltip');
  if (tooltip) tooltip.style.display = 'none';
}

Key Notes #

• Mobile Compatibility: The SELECTION_CHANGED_EVENT works seamlessly with touch inputs on mobile devices—no extra code needed for touch handling.
• DbId Lookup: If you use the predefined urlMap approach, you can get component dbIds by using the Viewer's search function or exporting the model's hierarchy via the Forge Model Derivative API.
• User Experience: Adding the hover cursor and tooltip helps users identify which components are interactive, reducing confusion.
• Security: Ensure the URLs you link to are trusted, as window.open can be misused if not properly validated.

内容的提问来源于stack exchange，提问作者R. Nelson