Three.js中如何让玩家控件与墙壁碰撞

Question

我有一个三.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

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

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

Answer 1

Three.js 是一个图形渲染库，不关心碰撞检测。为此你需要一些不同的东西。这里有几个选项：

• 如果您的场景大部分是平面和矩形，即即使它是 3D，玩家也只能在一个 2D 平面上行走，墙壁形状简单，您可以创建一个简单的网格来标记障碍物的位置，然后检查玩家的坐标网格并取消运动（如果它最终进入墙壁内）。
• 使用物理引擎：Physijs是一个易于使用且灵活的 Bullet 动力学引擎包装器，适用于 Three.js。您可以将场景网格包裹在单个

  Physijs.ConcaveMesh

  中，向相机添加碰撞形状并进行即时、准确的碰撞检测 - 但如果您有一个相当复杂的场景，那么速度会很慢。
• 更好的方法是将场景分解为离散的对象，例如矩形墙部分，并为它们单独添加廉价的碰撞形状（例如立方体、球体、圆柱体）。 Physij 可以做到这一点，然后还有 cannon.js（请参阅此处 FPS 演示）。
• 自行进行碰撞检测。我真的不推荐这样做，因为它是一个兔子洞，但它可以让您完全控制哪些功能、准确性和性能权衡最适合您。

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