网格旋转时 Threejs 和 PhysiJs 物理引擎未更新

Question

我是Threejs初学者

我创建了一个长方体网格和一个球体网格，并使用 phyJs 应用物理。我想要做的是在 Box Mesh 旋转并穿过球时击球。然而，当盒子网格旋转时，它没有击中球就通过了。我认为盒子网格在开始旋转时会失去物理性。

function createBall () {
    var ball = null;
    var ballGeo = new THREE.SphereGeometry(1.5, 30, 30);
    var ballMat = Physijs.createMaterial(
        new THREE.MeshBasicMaterial({specular: 0x111111})
        , 0.3, 0.1
    );
    ball = new Physijs.SphereMesh(
      ballGeo,
      ballMat,
      5
    );
    ball.position.set(30, 10, 0);
    scene.add(ball);
}
function createBox () {
    var material = Physijs.createMaterial(
        new THREE.MeshLambertMaterial(
            {
                color: 0x8041D9,
            }), 5, 0.3);

    var boxMesh = new THREE.BoxGeometry(5, 5, 25);
    box = new Physijs.BoxMesh(
        boxMesh,
        material,
        5
    );
    box.position.z = 20;
    scene.add(box);
}
function createHeightMap() {
    var initColor = new THREE.Color( 0x00ff00 );
    initColor.setHSL( 0.25, 0.85, 0.5 );
    var ground_material = Physijs.createMaterial(
        new THREE.MeshPhongMaterial(
            { color: 0x47C83E}
        ),
        .5,
        .5
    );

    var ground_geometry = new THREE.PlaneGeometry(800, 800, 100, 100);
    ground = new Physijs.HeightfieldMesh(
        ground_geometry,
        ground_material,
        0, // 질량
        100, // PlaneGeometry 의 분할 세그먼트랑 똑같은 값으로 줘야 한다.
        100  // PlaneGeometry 의 분할 세그먼트랑 똑같은 값으로 줘야 한다.
    );

    ground.position.y = -10;
    ground.rotation.x = Math.PI / -2;
    ground.receiveShadow = true;


    var meshes = [];
    var controls = new function () {
        this.startRotate = false;
        this.addBall = function () {
            createBall();
        };
        this.addBox = function () {
            createBox();
        };
        this.clearMeshes = function () {
            meshes.forEach(function (e) {
                scene.remove(e);
            });
            meshes = [];
        }

    };

    var gui = new dat.GUI();
    gui.add(controls, 'addBall');
    gui.add(controls, 'addBox');
    gui.add(controls, 'clearMeshes');
    gui.add(controls, 'startRotate').onChange(function (e) {
        isStartRoate = e;
    });
    return ground;
}

render = function () {
    stats.update();
    if (isStartRoate === true) {
        var rotateMatrix = new THREE.Matrix4();
        rotateMatrix.identity();
        rotateMatrix.makeRotationY(0.05);
        box.applyMatrix(rotateMatrix);
    }
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    var axes = new THREE.AxesHelper(30);
    scene.add(axes);
    scene.simulate(undefined, 2);
};

function initStats() {

    var stats = new Stats();

    stats.setMode(0); // 0: fps, 1: ms

    // Align top-left
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';

    document.getElementById("Stats-output").appendChild(stats.domElement);

    return stats;
}


window.onload = initScene;

下面是代码笔link

codepen

好像没有更新肉体。请给我任何想法

Answer 1

当使用 Physijs 时，您应该使用 setLinearVelocity() 或 setAngularVelocity() 以便以正确的物理方式更新对象的位置和旋转。更新后的代码笔展示了这种方法：

https://codepen.io/anon/pen/YJmajN

此外，您在渲染循环中创建 AxesHelper 的方式也不是什么好方法。在场景设置期间创建助手一次。

网格旋转时 Threejs 和 PhysiJs 物理引擎未更新

Threejs & PhysiJs physics engine not updated when Mesh rotate

physics

three.js