将UI元素添加到angular中的forgeviewer

在Angular中使用Forge Viewer添加UI元素涉及到几个关键步骤，包括初始化Forge Viewer、创建自定义UI元素以及将这些元素集成到Viewer中。以下是详细的步骤和相关概念：

基础概念

Forge Viewer: 是Autodesk提供的一个基于WebGL的3D模型查看器，用于在网页上展示和交互Autodesk设计软件（如AutoCAD、Revit等）生成的3D模型。

Angular: 是一个流行的开源前端框架，用于构建单页应用程序（SPA）。

类型与应用场景

类型: 自定义UI元素可以是按钮、滑块、菜单等，用于控制模型的显示、交互或提供额外的功能。

应用场景:

在建筑项目中，添加用于切换不同视图（如平面图、立面图）的按钮。
在制造环境中，实现零件替换或材料属性调整的交互控件。

实现步骤

步骤1: 安装Forge Viewer

首先，需要在Angular项目中安装Forge Viewer库。

npm install autodesk-forge-viewer

步骤2: 初始化Forge Viewer

在Angular组件中初始化Forge Viewer，并加载一个3D模型。

import { Component, OnInit } from '@angular/core';
declare let Autodesk: any;

@Component({
  selector: 'app-viewer',
  template: `<div id="forgeViewer"></div>`,
})
export class ViewerComponent implements OnInit {
  ngOnInit() {
    Autodesk.Viewing.Initializer({ env: 'AutodeskProduction' }, () => {
      const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
      viewer.start();
      const documentId = 'urn:YOUR_URN_HERE';
      Autodesk.Viewing.Document.load(documentId, (doc) => {
        const viewables = doc.getRoot().getDefaultGeometry();
        viewer.loadDocumentNode(doc, viewables);
      });
    });
  }
}

步骤3: 添加自定义UI元素

创建一个新的Angular组件作为自定义UI元素，并在Forge Viewer中添加它。

// custom-ui.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-custom-ui',
  template: `<button (click)="onClick()">Click Me</button>`,
})
export class CustomUiComponent implements OnInit {
  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 将自定义UI元素添加到Forge Viewer的工具栏
    const viewer = Autodesk.Viewing.Private.GuiViewer3D.getInstance();
    viewer.addToolbarButton({
      icon: this.el.nativeElement.querySelector('button'),
      onClick: () => this.onClick(),
    });
  }

  onClick() {
    console.log('Custom UI button clicked!');
    // 在这里添加你的逻辑
  }
}

然后在主组件中使用这个自定义UI组件。

// viewer.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-viewer',
  template: `
    <div id="forgeViewer"></div>
    <app-custom-ui></app-custom-ui>
  `,
})
export class ViewerComponent {}

遇到的问题及解决方法

问题: 自定义UI元素没有正确显示或响应。

原因: 可能是由于Forge Viewer初始化顺序问题，或者自定义UI组件的DOM元素尚未准备好就被访问。

解决方法: 确保Forge Viewer完全初始化后再添加自定义UI元素。可以使用setTimeout或Angular的生命周期钩子来延迟添加操作。

ngOnInit() {
  Autodesk.Viewing.Initializer({ env: 'AutodeskProduction' }, () => {
    const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
    viewer.start();
    // ... 加载模型的代码 ...

    setTimeout(() => {
      const customUiElement = document.createElement('app-custom-ui');
      viewer.getToolbar(true).addControl(customUiElement);
    }, 1000); // 延迟1秒确保Forge Viewer已准备好
  });
}

通过以上步骤，你应该能够在Angular应用中成功集成Forge Viewer，并添加自定义UI元素。