vue 中 forge viewer 设置模型高亮，点击模型弹出信息框

要在 Forge Viewer 中设置模型高亮和在点击模型时弹出信息框，你可以使用以下代码：

// 定义模型高亮材质
const highlightMaterial = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  shininess: 0.8
});

// 添加模型高亮效果
function highlightModel(dbId) {
  const fragIdsArray = viewer.model.getFragmentList().getFragIds(dbId);
  for (let i = 0; i < fragIdsArray.length; i++) {
    const fragId = fragIdsArray[i];
    const fragProxy = viewer.impl.getFragmentProxy(viewer.model, fragId);
    fragProxy.getMaterial(true, highlightMaterial);
    fragProxy.updateAnimTransform();
  }
}

// 取消模型高亮效果
function unhighlightModel(dbId) {
  const fragIdsArray = viewer.model.getFragmentList().getFragIds(dbId);
  for (let i = 0; i < fragIdsArray.length; i++) {
    const fragId = fragIdsArray[i];
    const fragProxy = viewer.impl.getFragmentProxy(viewer.model, fragId);
    fragProxy.getMaterial(true);
    fragProxy.updateAnimTransform();
  }
}

// 添加模型点击事件
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function (event) {
  const dbId = event.dbIdArray[0];
  if (dbId) {
    // 获取模型的属性
    viewer.getProperties(dbId, function (props) {
      // 创建信息框
      const container = document.createElement('div');
      container.innerHTML = `
        <div>构件 ID: ${dbId}</div>
        <div>构件名称: ${props.name}</div>
        <div>构件类型: ${props.type}</div>
      `;
      // 显示信息框
      viewer.container.appendChild(container);
      // 设置信息框位置
      const screenPoint = viewer.worldToClient(viewer.impl.getFragmentProxy(viewer.model, dbId).fragProxy.position);
      container.style.left = `${screenPoint.x}px`;
      container.style.top = `${screenPoint.y}px`;
      // 高亮模型
      highlightModel(dbId);
    });
  }
});

// 添加单击事件，隐藏信息框和取消模型高亮效果
viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function () {
  const container = viewer.container.querySelector('.info-container');
  if (container) {
    container.remove();
  }
  viewer.clearSelection();
});

在上面的代码中，我们首先定义了一个模型高亮材质 `highlightMaterial`，然后在 `highlightModel` 函数中将指定的构件设为高亮状态。在 `unhighlightModel` 函数中，我们将指定的构件的材质设为默认值，从而取消高亮效果。

接下来，我们添加了一个 `Autodesk.Viewing.SELECTION_CHANGED_EVENT` 事件监听器，当用户单击模型时，我们会获取该构件的属性，并在页面上创建一个信息框，显示该构件的属性。我们还在 `highlightModel` 函数中调用了 `unhighlightModel` 函数，以取消其他构件的高亮效果。

最后，我们添加了一个 `Autodesk.Viewing.CAMERA_CHANGE_EVENT` 事件监听器，当用户单击页面时，我们会隐藏信息框和取消模型的高亮效果。