如何在Angular中将AR.js绑定到指定HTML元素而非body？

别急，完全可以指定canvas或自定义容器作为AR视频的输出元素！AR.js默认会自动操作body导致页面布局混乱，但咱们通过手动初始化API就能完美解决这个问题，正好对应你提到的问题的核心思路。下面是具体的实现步骤：

1. 在组件模板中添加指定的输出容器 #

首先在你的Angular组件HTML里，添加一个用于承载AR内容的容器（可以是div或canvas），给它一个唯一ID方便获取：

<!-- 自定义AR容器，可根据需求调整宽高样式 -->
<div id="ar-container" style="width: 100%; height: 600px; border: 1px solid #ccc;"></div>

2. 手动初始化AR.js，绑定到指定容器 #

在组件的TypeScript文件中，选择ngAfterViewInit钩子（确保DOM已经渲染完成），手动调用AR.js的API来初始化，核心是指定domElement为你的自定义容器：

import { AfterViewInit, Component } from '@angular/core';

// 声明THREEx（AR.js依赖的全局对象）
declare const THREEx: any;

@Component({
  selector: 'app-ar-demo',
  templateUrl: './ar-demo.component.html',
  styleUrls: ['./ar-demo.component.css']
})
export class ArDemoComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 获取自定义的AR容器元素
    const arContainer = document.getElementById('ar-container');
    if (!arContainer) return;

    // 1. 初始化AR工具包上下文
    const arToolkitContext = new THREEx.ArToolkitContext({
      cameraParametersUrl: 'assets/camera_para.dat', // 相机参数文件，放在assets目录
      detectionMode: 'mono', // 根据需求选择检测模式
      maxDetectionRate: 30,
    });

    arToolkitContext.init(() => {
      // 绑定相机投影矩阵
      const camera = new THREE.Camera();
      camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
    });

    // 2. 创建AR源，指定输出到自定义容器
    const arToolkitSource = new THREEx.ArToolkitSource({
      sourceType: 'webcam', // 选择输入源：摄像头/视频等
      sourceWidth: 640,
      sourceHeight: 480,
      displayWidth: 640,
      displayHeight: 480,
      domElement: arContainer // 关键：指定AR内容的输出容器
    });

    // 初始化AR源
    arToolkitSource.init(() => {
      setTimeout(() => {
        arToolkitContext.arController.initOverlay(arToolkitSource);
      }, 2000);
    });

    // 处理窗口大小变化，保持AR容器适配
    window.addEventListener('resize', () => {
      arToolkitSource.onResizeElement();
      arToolkitSource.copyElementSizeTo(arContainer);
      if (arToolkitContext.arController) {
        arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas);
      }
    });
  }
}

3. 额外注意事项 #

• 引入AR.js脚本：确保在angular.json的scripts数组中添加AR.js的依赖，比如：

  "scripts": [
    "node_modules/ar.js/aframe/build/ar.js"
  ]
  

• 相机参数文件：camera_para.dat是AR.js需要的相机校准文件，你可以从AR.js的官方资源获取，放在项目的assets目录下，确保路径正确。
• 权限问题：使用摄像头需要用户授权，确保浏览器允许访问摄像头权限。

这样操作后，AR.js的所有内容都会渲染到你指定的ar-container里，再也不会自动修改body元素，页面布局也就不会被破坏啦！

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