时间戳

首页 > 解决方案 > 三组js碰撞检测（THREE.Group）

javascript - 三组js碰撞检测（THREE.Group）

问题描述

我正在研究盒子和球体的 3D AABB 碰撞检测。

如果将框直接添加到场景中，则检测到碰撞，但如果将其添加到组（THREE.Group）中并旋转，则不会检测到碰撞。

这是添加框的代码

function addPlatforms() {

    var coreGroup = new THREE.Group(); // this is the group
    scene.add(coreGroup);

    var box = [];

    cube_box1 = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
    box.push(new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.2), materials.solid));
    box[0].position.set(-1.83, -0.22, 1.11);
    box[0].rotation.x += Math.PI / 2;
    box[0].rotation.z -= 0.78;
    box[0].receiveShadow = true;


    cube_box2 = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
    box.push(new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.2), materials.solid));
    box[1].position.set(-2.15, -0.22, 0.51);
    box[1].rotation.x += Math.PI / 2;
    box[1].receiveShadow = true;

    var platGroup = new THREE.Group();
    platGroup.add(box[0]);
    platGroup.add(box[1]);
    platGroup.rotation.y -= 2;
    platGroup.position.y  = 1;

    coreGroup.add(platGroup);


    cube_box1.setFromObject(box[0]);
    platformArr.push(cube_box1);

    cube_box2.setFromObject(box[1]);
    platformArr.push(cube_box2);
}

获取盒子和球体之间碰撞的代码。

访问https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js

THREE.Sphere.__closest = new THREE.Vector3();
THREE.Sphere.prototype.intersectsBox = function(box) {
    // get box closest point to sphere center by clamping
    THREE.Sphere.__closest.set(this.center.x, this.center.y, this.center.z);
    THREE.Sphere.__closest.clamp(box.min, box.max);

    var distance = this.center.distanceToSquared(THREE.Sphere.__closest);
    return distance < (this.radius * this.radius);
};

function isCollision() {
    for (var i = 0; i < platformArr.length; i++) {
        _cubeBox = platformArr[i];
        return sphereBox.intersectsBox(_cubeBox);
    }
}

这就是添加球体的方式

function addBall(){

    sphere = new THREE.Mesh(
        new THREE.SphereGeometry(0.19, 20, 20), materials.solid);
    sphere.position.set(0, 1, -2);
    sphere.geometry.computeBoundingSphere();
    scene.add(sphere);

    sphereBox = new THREE.Sphere(sphere.position, sphere.geometry.boundingSphere.radius);
    sphereBox.radius = sphere.geometry.boundingSphere.radius;

    cy = sphere.position.y;
}

渲染逻辑

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);

    if (collision) { // ball is on surface
        vy = -vy;
        collision = false;
    }

    cy -= vy * dt;

    sphere.position.y = cy;

    if (vy <= mvy)
        vy += gravity;

    collision = isCollision();
}

如果一个盒子被添加到场景中并且检测到与球体的碰撞，那么它的工作。Ex - 创建一个简单的盒子并更改一些属性，如旋转和位置

var _box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.2), materials.solid);
_box.position.set(-1.83, -0.22, 1.11);
_box.rotation.x += Math.PI / 2;
_box.rotation.z -= 0.78;
_box.receiveShadow = true;

然后在动画更新中找到碰撞

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);

    if (collision) { // ball is on surface
        vy = -vy;
        collision = false;
    }

    cy -= vy * dt;

    sphere.position.y = cy;

    if (vy <= mvy)
        vy += gravity;

    collision = sphereBox.intersectsBox(_box);
}

标签： javascriptthree.js3dgame-enginegame-physics

解决方案

默认情况下，对象的世界矩阵将每帧更新一次。您正在实例化这些框、转换它们并将它们添加到组中。然后你立即调用cube_box1.setFromObject(box[0]);，它在matrixWorld内部使用。但是盒子的世界矩阵还没有设置。您可以等待一帧让矩阵自动计算，或者您必须手动触发矩阵更新：

//... your code ...
coreGroup.add(platGroup);

coreGroup.updateMatrixWorld( true );

cube_box1.setFromObject(box[0]);
platformArr.push(cube_box1);
//... your code ...

Three.js 文档矩阵转换

当父对象或子对象的转换发生变化时，您可以matrixWorld通过调用请求更新子对象updateMatrixWorld()。

Three.js 文档 Object3D

.matrixAutoUpdate : Boolean

设置后，它会计算位置矩阵（旋转或四元数）并缩放每一帧，并重新计算 matrixWorld 属性。默认为Object3D.DefaultMatrixAutoUpdate（真）。

推荐阅读