javascript - Three.js 碰撞并移除碰撞对象

Question

我正在使用 Three.js 创建一个 webgl 游戏，现在我成功进行了碰撞检测，但是我需要在碰撞后从场景中删除碰撞对象，我该怎么做？

基本上我遵循这个教程

http://webmaestro.fr/blog/basic-collisions-detection-with-three-js-raycaster/

在这里，我将所有障碍物放入障碍物变量中，这是我的代码。

function collide(){
    'use strict';

    var collisions, i,
    // Maximum distance from the origin before we consider collision
    distance = 32,
    // Get the obstacles array from our world
    obstacles = getObstacles();
    // For each ray
    for (i = 0; i < rays.length; i += 1) {
        // We reset the raycaster to this direction
        caster.set(objectHolder.position, rays[i]);
        // Test if we intersect with any obstacle mesh
        collisions = caster.intersectObjects(obstacles);
        // And disable that direction if we do
        if (collisions.length > 0 && collisions[0].distance <= distance) {

            // Yep, this.rays[i] gives us : 0 => up, 1 => up-left, 2 => left, ...
            if ((i === 0 || i === 1 || i === 7) && direction.z === 1) {
                // direction.setZ(0);

                console.log("hit!!! up upleft left");

            } else if ((i === 3 || i === 4 || i === 5) && direction.z === -1) {
                // direction.setZ(0);

                console.log("hit!!! i 3 i 4 i 5");
            }
            if ((i === 1 || i === 2 || i === 3) && direction.x === 1) {
                // direction.setX(0);

                console.log("hit!!! i 1 i 2 i 3 x 1");
            } else if ((i === 5 || i === 6 || i === 7) && direction.x === -1) {
                // direction.setX(0);

                console.log("hit!!!");
            } else if (i === 0 || direction.z === 1){
                console.log("hit!!!");
            }
        }
    }

}

这是获取障碍物函数，我这样做了，我基本上有两个立方体对象并与障碍物连接:

function getObstacles(){
    return obstacles.concat(cube, cube2);
}

现在，当玩家对象的对象击中特定的立方体时，如何删除它。 如果有的话，您能否建议在我的代码中进行碰撞检测的更好方法。

光线转换代码是这样的。

var rays = [
                new THREE.Vector3(0, 0, 1),
                new THREE.Vector3(1, 0, 1),
                new THREE.Vector3(1, 0, 0),
                new THREE.Vector3(1, 0, -1),
                new THREE.Vector3(0, 0, -1),
                new THREE.Vector3(-1, 0, -1),
                new THREE.Vector3(-1, 0, 0),
                new THREE.Vector3(-1, 0, 1)
        ];
var caster = new THREE.Raycaster();

在哪里可以获得有关 Three.js 中使用的类或方法(例如光线转换)的更多信息？

Answer 1

回答你的第一个问题。一旦光线转换器返回相交的对象数组，您只需将第一个对象传递给 scene.remove 即可

scene.remove( collisions[0].object );

就碰撞检测而言，有多种不同的方法。 Raycasting 是 Three.js 目前实现的方法。查看 Three.js 示例和文档页面:http://threejs.org/docs/#Reference/Core/Raycaster 。该文档存在一些空白，但对于像这样的核心功能非常有用。

编辑:刚刚看到评论，是的，有些文档不完整。但每个文档页面的底部都有一个指向 .js 文件的链接，这通常非常有用。在这种情况下，您会注意到 Raycaster.js 函数返回具有以下结构的 intersects 数组对象。

intersects.push( {
    distance: distance,
    point: intersectionPoint,
    face: null,
    faceIndex: null,
    object: object
} );

因此，至少您可以访问距离、点、面(如果适用)、faceIndex(如果适用)和对象:)希望有所帮助。