如何在AFrame.js中加载Three.js兼容3D动画模型并实现AR标记显示？

首先，你已经能在Three.js里顺利运行带动画的模型，又能通过AFrame显示OBJ模型，那核心思路就是把Three.js加载好的模型（包括动画）挂载到AFrame的AR标记实体上，避开aframe-extras的问题，直接用你熟悉的Three.js原生加载器来处理模型和动画。下面是具体的实现步骤和代码示例：

1. 基础依赖引入 #

先在HTML里引入AFrame、AR.js，以及Three.js的FBXLoader（如果你的Three.js版本自带FBXLoader就不用单独引，否则需要单独加载）：

<!-- AFrame核心库 -->
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
<!-- AR.js用于标记跟踪 -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<!-- Three.js的FBXLoader（如果你的Three.js版本没有内置的话） -->
<script src="https://cdn.jsdelivr.net/npm/three@0.150.1/examples/js/loaders/FBXLoader.js"></script>

2. 编写自定义AFrame组件加载Three.js模型 #

AFrame允许你写自定义组件，在组件里直接操作Three.js的API，这样就能复用你熟悉的FBX加载逻辑。这里我们写一个three-fbx-model组件：

AFRAME.registerComponent('three-fbx-model', {
  schema: {
    src: { type: 'string' },
    autoPlay: { type: 'boolean', default: true }
  },
  init: function () {
    const el = this.el;
    const { src, autoPlay } = this.data;
    
    // 初始化FBX加载器
    const loader = new THREE.FBXLoader();
    
    loader.load(src, (fbxModel) => {
      // 处理模型动画（如果有的话）
      let mixer = null;
      if (fbxModel.animations.length > 0) {
        mixer = new THREE.AnimationMixer(fbxModel);
        const action = mixer.clipAction(fbxModel.animations[0]);
        if (autoPlay) action.play();
        
        // 每帧更新动画混合器
        el.sceneEl.addEventListener('renderloop', () => {
          if (mixer) mixer.update(0.016); // 近似60fps的时间步长
        });
      }
      
      // 将Three.js模型添加到AFrame实体的object3D中
      el.setObject3D('mesh', fbxModel);
      
      // 可选：调整模型位置、缩放，适配AR标记大小
      fbxModel.scale.set(0.1, 0.1, 0.1);
      fbxModel.position.set(0, 0.5, 0);
    }, (xhr) => {
      // 加载进度回调（可选）
      console.log(`模型加载进度: ${(xhr.loaded / xhr.total * 100)}%`);
    }, (error) => {
      console.error('模型加载失败:', error);
    });
  }
});

3. 构建AR标记场景 #

接下来，用AR.js的marker-camera和marker实体，把我们的自定义组件挂载到标记实体上，这样扫描到标记时就会显示Three.js加载的模型：

<a-scene arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
  <!-- AR相机 -->
  <a-marker-camera preset="hiro"></a-marker-camera>
  
  <!-- AR标记实体：扫描hiro标记时显示Three.js模型 -->
  <a-marker preset="hiro">
    <a-entity three-fbx-model="src: ./your-model.fbx; autoPlay: true"></a-entity>
  </a-marker>
</a-scene>

关键注意点 #

• 模型路径：确保src里的FBX模型路径是正确的，本地开发注意跨域问题（可以用本地服务器比如python -m http.server启动）。
• 动画处理：如果你的模型有多个动画，可以在组件里扩展逻辑，比如支持指定播放某个动画片段。
• aframe-extras替代：既然你说aframe-extras不好用，用这种直接操作Three.js的方式更灵活，完全复用你原有的Three.js模型加载和动画代码。
• 标记预设：示例里用的是hiro预设标记，你也可以用自定义标记，参考AR.js的文档修改preset或者type: pattern; url: ./your-pattern.patt;。

这样设置后，当你扫描对应的AR标记时，AFrame就会触发标记实体的显示，同时加载并播放你用Three.js FBXLoader处理的模型动画，完美衔接你现有的Three.js工作流。

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