Question

我正在为盒子和球体进行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();
}

如果将一个盒子添加到场景中，并且检测到与球体发生碰撞，则其工作。前- 创建一个简单的框并更改一些属性，例如旋转和位置

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);
}

Answer 1

默认情况下，对象的世界矩阵将每帧更新一次。您将实例化这些框，进行转换并将其添加到组中。然后，您立即致电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 Docs Matrix Transformations

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

Three.js Docs Object3D

.matrixAutoUpdate : Boolean

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

组（THREE.Group）中的三个js碰撞检测

1 个答案: