Three.js绑定相机的Box3与墙体Box3碰撞检测无响应问题求助

核心问题点 #

• 节点挂载逻辑冲突：human对象先被添加到scene，后续又被添加到camera，Three.js中单个3D对象只能存在一个父节点，最终human会脱离scene成为相机子对象，其坐标体系是相机局部坐标而非世界坐标
• 墙体包围盒未更新：初始化阶段仅生成了一次墙体的Box3对象，动画循环中没有同步更新墙体的包围盒，导致移动墙体后始终用初始位置的包围盒做碰撞判断
• BoxHelper坐标同步异常：humanhelper被添加到scene下，但关联的human是相机子对象，部分版本的BoxHelper在关联对象不在同一场景根节点下时，无法正确获取世界矩阵更新线框和包围盒

修复步骤 #

1. 调整human的挂载逻辑，移除重复挂载的代码，保留camera.add(human)即可，无需先添加到scene
2. 动画循环中每次做碰撞判断前，同步更新墙体的Box3包围盒
3. 直接从human对象生成包围盒，不需要依赖BoxHelper做中转，避免中间层同步异常

修正后核心代码 #

初始化代码 #

const wallgeometry = new THREE.PlaneGeometry( 200, 50 );
const wallmaterial = new THREE.MeshStandardMaterial( {color: 0x366078, side: THREE.DoubleSide} );
const wall1a = new THREE.Mesh( wallgeometry, wallmaterial );
wall1a.position.set(40,0,50); wall1a.rotation.y=0.5*Math.PI; scene.add( wall1a );

const humangeometry = new THREE.BoxGeometry( 3,3, 3 );
const humanmaterial = new THREE.MeshBasicMaterial( {color: 0x00ff00,  transparent: false, opacity: 1.0} );
const human = new THREE.Mesh( humangeometry, humanmaterial );
// 直接挂载到相机，不需要先添加到scene
camera.add(human);
// 辅助线框仅调试用，无需用来生成包围盒
var humanhelper = new THREE.BoxHelper(human, 0x00ff00);
scene.add(humanhelper);
var humanbox3 = new THREE.Box3();

var wallhelper = new THREE.BoxHelper(wall1a, 0x00ff00);
scene.add(wallhelper);
var box3b = new THREE.Box3();

动画循环代码 #

// 更新辅助线框（不需要调试可以删除）
humanhelper.update();
wallhelper.update();
// 同步更新两个对象的世界坐标包围盒
humanbox3.setFromObject(human);
box3b.setFromObject(wall1a);
if(humanbox3.intersectsBox(box3b))
{
    console.warn("Collision TRUE");
};

调试参考示意图 #

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