如何让玩家控制与three.js中的墙碰撞

时间:2012-12-19 20:24:56

标签: webgl three.js

我有一个带有大网格物体的three.js场景作为我的地图(从混合器中导出)。

我加载它:

// map
var loader = new THREE.JSONLoader(true);
var thiz = this;
loader.load(
    "iceworld.js"
    , function(geometry, materials) {
        materials[0].side = THREE.DoubleSide;
        var faceMaterial = new THREE.MeshLambertMaterial( materials[0] );
        //var faceMaterial = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'ice.jpg' ), side: THREE.DoubleSide } );

       mesh = new THREE.Mesh( geometry, faceMaterial );
       thiz.scene.add( mesh );
     }
);

我使用PointerLockControls。现在我可以穿过地图的墙壁,因为没有碰撞检测。

我该如何实现?我没有在示例和文档中找到解决方案。

1 个答案:

答案 0 :(得分:2)

Three.js是一个图形渲染库,不涉及碰撞检测。你需要不同的东西。这里有几个选项:

  • 如果您的场景大多是平面和矩形,即使它是3d,玩家只能在一个2d平面上行走,墙壁的形状很简单,您可以创建一个标记障碍物位置的简单网格然后检查您的玩家如果它在墙内结束,则与网格坐标并取消移动。
  • 使用物理引擎:Physijs是一个易于使用且灵活的Bullet动态引擎包装器,适用于Three.js。您可以将场景网格物体包裹在单个Physijs.ConcaveMesh内,为相机添加碰撞形状并进行即时,准确的碰撞检测 - 但如果您有一个相当复杂的场景,那将会很慢。
  • 更好的方法是将场景分解为离散的对象,例如矩形墙部分,并为它们单独添加廉价的碰撞形状(如立方体,球体,圆柱体)。 Physijs可以做到这一点,然后有cannon.jssee FPS demo here)。
  • 滚动您自己的碰撞检测。我不推荐这个,因为它是一个兔子洞,但它可以让你完全控制哪些功能,准确性和性能权衡对你来说是完美的。

就个人而言,我已经用Three.js创建了一个FPS游戏。我的关卡设计是非常规则的,所以我可以使用网格方法进行玩家碰撞,但我也想要动态对象(例如桶,盒子等),并且使用Physijs让我几乎可以轻松地集成它们。因此,通过将Physijs立方体创建到墙壁部分来处理墙壁碰撞。