如何在Angular中获取forge-viewer onClick事件对应的xyz坐标

一、正确获取Viewer实例的实现逻辑 #

1. 模板声明挂载容器 #

给Viewer挂载节点声明模板引用变量，用于后续获取DOM实例：

<div #viewerContainer style="width: 100%; height: 800px;"></div>

2. 组件类初始化逻辑 #

在DOM渲染完成的ngAfterViewInit生命周期中执行Viewer初始化，用箭头函数保证this指向正确，将实例绑定到类属性：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
// 避免TS报未定义错误，已安装Forge类型包可省略
declare const Autodesk: any;

@Component({
  selector: 'app-forge-viewer',
  templateUrl: './forge-viewer.component.html',
  styleUrls: ['./forge-viewer.component.css']
})
export class ForgeViewerComponent implements AfterViewInit {
  // 存储Viewer实例
  private viewer?: Autodesk.Viewing.GuiViewer3D;
  // 绑定模板中的Viewer容器DOM
  @ViewChild('viewerContainer') private viewerContainer!: ElementRef<HTMLDivElement>;

  ngAfterViewInit(): void {
    this.initForgeViewer();
  }

  private initForgeViewer(): void {
    const options = {
      env: 'AutodeskProduction',
      accessToken: '你的Forge访问令牌'
    };

    Autodesk.Viewing.Initializer(options, () => {
      // 箭头函数保证this指向当前组件实例
      this.viewer = new Autodesk.Viewing.GuiViewer3D(this.viewerContainer.nativeElement);
      const startedCode = this.viewer.start();
      if (startedCode > 0) {
        console.error('Viewer初始化失败，错误码：', startedCode);
        return;
      }
      // 加载模型，完成后绑定点击事件
      this.loadForgeModel('你的模型URN');
    });
  }

  private loadForgeModel(urn: string): void {
    Autodesk.Viewing.Document.load(
      `urn:${urn}`,
      (doc) => {
        const viewables = doc.getRoot().getDefaultGeometry();
        this.viewer?.loadDocumentNode(doc, viewables).then(() => {
          // 模型加载完成，Viewer实例已完全可用，绑定点击事件
          this.bindClickEvent();
        });
      },
      (err) => console.error('模型加载失败', err)
    );
  }

二、绑定点击事件获取XYZ坐标 #

在组件类中新增点击事件绑定方法，直接从事件对象中读取世界坐标属性：

private bindClickEvent(): void {
  if (!this.viewer) return;

  this.viewer.addEventListener(Autodesk.Viewing.CLICK_EVENT, (event) => {
    // worldPoint即为点击位置的世界坐标，包含x/y/z三个数值属性
    const clickWorldPoint = event.worldPoint;
    console.log('点击位置XYZ坐标：', clickWorldPoint.x, clickWorldPoint.y, clickWorldPoint.z);
    // 此处可执行自定义业务逻辑
  });
}

常见踩坑说明 #

• 不要在ngOnInit等DOM未渲染完成的生命周期中执行Viewer初始化逻辑，必须放在ngAfterViewInit中执行，否则容器DOM不存在会导致初始化失败
• 所有Viewer相关的回调都使用箭头函数，避免普通函数修改this指向，导致无法给组件的viewer属性赋值
• 调用实例方法前可加可选链?.做兼容判断，避免实例未初始化完成时报错

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