Three.js - 碰撞检测 - Obj Wavefront

时间:2013-05-28 09:04:38

标签: three.js webgl collision-detection wavefront

我正在尝试使用three.js在建筑物内构建虚拟旅游(整个建筑物是一个obj模型)。一切都很好,图书馆很简单。我最关键的问题是我无法用相机实现碰撞检测,我尝试使用光线,但我找不到合适的例子。

我的模型加载:

var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {
    var newModel = event.content;
    newModel.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    } );
    scene.add( newModel );
    objects.push( newModel );
    });
loader.load( 'model/model.obj', 'model/model.mtl' );

相机创建(我不知道它是否与问题相关)

camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    10000
);
camera.position.set( 0, 25, 0 );
camera.lookAt( 0, 0, 0 );

注意:相机在模型内部移动,我不想检测两个单独的obj模型之间的碰撞,我想在单个模型中检测碰撞(并阻止相机穿过墙壁)。

非常感谢任何帮助

1 个答案:

答案 0 :(得分:1)

http://threejs.org/docs/58/#Reference/Core/Raycaster查看Three.js中Raycaster的文档,您可以创建像Raycaster(原点,方向,近,远)的光线。也许对你而言,这看起来像是

var ray = new THREE.Raycaster(camera.position, cameraForwardDirection, camera.position, collisionDistance);

其中cameraForwardDirection是相机前方的方向。我认为你可以通过以下方式来实现这一点:

var cameraForwardDirection = new THREE.Vector3(0,0,-1).applyMatrix4(camera.matrixWorld);

这应该有效,因为相机指向负Z方向(因此为0,0,-1),我们希望将相机的方向应用于此向量。这假设你只是向前迈进。如果您想检查其他方向的碰撞,可以在其他方向投射光线。

collisionDistance是碰撞的最小距离。您可以尝试使用此功能来查找与场景中的事物比例相关的内容。

投射此光线后,您需要检查交叉点。您可以使用ray.intersectObject(object,recursive)方法。因为看起来你只有一个模型,它可能看起来像:

var intersects = ray.intersectObject(newModel, true);
if(intersects.length>0){
 // stop the camera from moving farther into the wall
}