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

Question

我是三年级的初学者。

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

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;

下面是代码链接

码页

它似乎没有更新的物质性。请告诉我任何想法

Answer 1

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

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

此外，在呈现循环中创建AxesHelper的方式也不是很好的方法。在场景的设置过程中创建一次助手。