A-Frame 1.2.0版本相机与物体碰撞检测实现问题咨询

方案1：修复aframe-physics-system静态物体适配 #

静态物体碰撞不生效大多是属性配置错误或库版本不匹配导致，按以下步骤调整即可生效：

• 给相机外层套一个第一人称rig实体，添加kinematic-body属性，配置适配人体的碰撞盒尺寸：kinematic-body="radius: 0.3; height: 1.6; debug: false"，debug参数设置为true可可视化碰撞盒边界方便调试
• 所有需要参与碰撞的静态物体，统一添加static-body属性，复杂模型可手动指定碰撞形状降低性能消耗，比如立方体模型配置为static-body="shape: box"，球形模型配置为static-body="shape: sphere"
• 库版本&引入顺序修正：使用4.0及以上版本的aframe-physics-system，引入顺序为先加Cannon.js依赖，再加aframe-physics-system库，不要使用3.x及更低版本的物理库，旧版本不兼容A-Frame 1.2.0

注意不要给静态物体同时加static-body和dynamic-body属性，否则会被识别为动态物体，无法触发和相机的碰撞。

方案2：轻量无物理引擎碰撞方案（仅防穿模） #

如果不需要完整物理效果，可自定义射线检测组件实现碰撞，无需引入额外物理库，性能更高：

步骤1：注册自定义碰撞组件 #

AFRAME.registerComponent('camera-collision', {
  schema: {
    collisionTag: {default: '[collision-target]'}, // 参与碰撞的物体标签
    minDistance: {default: 0.5} // 触发碰撞的最小距离，可根据需求调整
  },
  tick: function () {
    const cameraEl = this.el;
    const sceneEl = cameraEl.sceneEl;
    const moveDirection = new THREE.Vector3();
    // 获取相机当前移动方向，不需要忽略垂直方向可删除下一行
    cameraEl.object3D.getWorldDirection(moveDirection);
    moveDirection.y = 0;
    moveDirection.normalize();
    // 射线检测碰撞
    const raycaster = new THREE.Raycaster(
      cameraEl.object3D.position, 
      moveDirection, 
      0, 
      this.data.minDistance
    );
    const collidables = Array.from(sceneEl.querySelectorAll(this.data.collisionTag))
      .map(item => item.object3D);
    const intersects = raycaster.intersectObjects(collidables, true);
    if (intersects.length > 0) {
      // 碰撞时清空移动速度，可根据你使用的移动组件调整对应逻辑
      if (cameraEl.components['wasd-controls']) {
        cameraEl.components['wasd-controls'].velocity.set(0, 0, 0);
      }
    }
  }
});

步骤2：组件使用 #

• 给所有需要参与碰撞的静态/动态物体添加collision-target属性
• 给相机实体添加camera-collision属性即可生效

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