Three.js+MindAR：如何让平面锚定位置并随AR相机旋转

核心思路是利用Three.js的世界空间坐标和lookAt方法，在动画循环中实时更新平面的位置和旋转，无需修改MindAR源码或添加额外图层，适合初学者快速实现需求。

修改后的完整代码 #

const THREE = window.MINDAR.IMAGE.THREE;

document.addEventListener('DOMContentLoaded', () => {
  const start = async() => {
    // 初始化MindAR
    const mindarThree = new window.MINDAR.IMAGE.MindARThree({
      container: document.body,
      imageTargetSrc: '../../assets/targets/testQR.mind',
    });
    const {renderer, scene, camera} = mindarThree;

    // 创建AR平面
    const geometry = new THREE.PlaneGeometry(1, 1.25);
    const material = new THREE.MeshBasicMaterial({color: 0x00ffff, transparent: true, opacity: 0.5});
    const plane = new THREE.Mesh(geometry, material);
    // 直接将平面添加到场景（而非锚点组），方便控制世界空间属性
    scene.add(plane);

    // 创建锚点（仅用于获取追踪目标的位置）
    const anchor = mindarThree.addAnchor(0);

    // 启动AR
    await mindarThree.start();
    renderer.setAnimationLoop(() => {
      // 更新锚点组的世界矩阵，确保获取到实时的追踪位置
      anchor.group.updateMatrixWorld(true);
      // 获取锚点的世界位置，并赋值给平面，锁定位置
      anchor.group.getWorldPosition(plane.position);
      // 让平面朝向相机
      plane.lookAt(camera.position);

      // 后续开发可直接引用plane的旋转值，比如：
      // const currentRotX = plane.rotation.x;
      // const currentRotY = plane.rotation.y;
      // const currentRotZ = plane.rotation.z;
      // 或者用四元数（更适合3D旋转计算）：
      // const currentQuaternion = plane.quaternion.clone();

      renderer.render(scene, camera);
    });
  }
  start();
});

关键步骤解释 #

1. 调整平面的挂载方式：将平面直接添加到scene而非锚点组，避免锚点组的旋转影响平面，方便独立控制平面的世界位置和旋转。
2. 实时更新锚点位置：通过updateMatrixWorld(true)强制更新锚点组的世界矩阵，确保getWorldPosition能获取到最新的追踪目标位置，然后将该位置赋值给平面，实现位置锁定。
3. 让平面朝向相机：调用plane.lookAt(camera.position)，Three.js会自动计算平面需要的旋转角度，使其正面始终朝向AR相机。
4. 引用旋转值：平面的rotation（欧拉角）或quaternion（四元数）属性会实时更新，后续开发可直接读取这些值用于其他逻辑。

对调研方向的补充说明 #

• 无需通过组索引定位平面：直接保存plane对象引用即可，更直观可靠。
• 无需修改MindAR源码：通过Three.js的原生API即可实现需求，降低学习和维护成本。
• 无需额外相机图层：当前方案在原有渲染流程中完成所有逻辑，性能开销极低。

内容的提问来源于stack exchange，提问作者XR-Pro-MAX-v2-Ultra