Three.js 碰撞并移除碰撞对象答案

【问题标题】：Three.js Collision and Remove the Collided ObjectThree.js 碰撞并移除碰撞对象
【发布时间】：2013-08-21 06:12:23
【问题描述】：

我正在使用 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 中使用的类或方法的更多信息，例如光线投射？

【问题讨论】：

在这里试试：threejs.org/docs。虽然上次我检查的只是已经完成了。另外，当我回家时，我会添加一些我不久前制作的碰撞代码。即使我没记错，我也使用了 Raycaster。
是的，但我在那里找不到任何有用的东西，或者我没有得到它
我怎么知道碰撞变量的属性。我尝试了碰撞.mesh，或碰撞[0]或碰撞[i]并尝试做..scene.remove（碰撞[i] ) 但它没有用
对于这样的情况，我过去只是打开库并查看它（所以我也得到了未缩小的版本）。并不完美，但是……过了一会儿你开始明白里面有什么。
您还可以在stemkoski.github.io/Three.js 找到一些有用的示例：)

标签： javascript three.js webgl

【解决方案1】：

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

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

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

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

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

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

【讨论】：