Better Player Movement in Physijs/Three.js

‹prev | My Chain | next›


I had a minor breakthrough last night in my efforts to understand Physijs, the physics engine for Three.js. I was finally able to get damping (slowing) to work. That, combined with simple controls allow my to move my player and interact with things fairly nicely.

Despite setting the angular damping to the highest possible setting (1.0), my avatar still has a tendency to spin:

Even though the Physijs project is fairly new, it has the beginning of a decent wiki. The page on materials promises some friction and bounciness settings. However, these settings have little effect in my setup:

  a_frame = new Physijs.BoxMesh(
    new THREE.CubeGeometry(250, 250, 250),
    Physijs.createMaterial(
      new THREE.Material(),
      1.0,
      0.0
    ),
    1000
  );

I have set the friction to its maximum (1.0), and the bounciness to its minimum (0.0). I also specified a mass of 1000 in case that had any effect on the friction calculation. Even with minimal bouncing and maximum friction, my avatar has a tendency to fly off into space:

I am a little unclear why this would happen—gravity ought to bring me right back down to the ground. This may be something worth experimenting with another day, although with a simpler setup. For now, I move back to my damping setup, which seemed to behave much closer to what I want.

In the end, I am able to eliminate all spinning with the __dirtyRotation flag that Physijs exposes to manually set the rotation (there is a similar setting for position):

function render() {
  a_frame.rotation.set(0,0,0);
  a_frame.__dirtyRotation = true;

  scene.simulate(); // run physics
  renderer.render(scene, camera);
}

With that, even if my avatar's enclosing cube strikes the very edge of the rock/static sphere, my player remains facing forward:

Satisfied, I call it a night here. Tomorrow, I plan to restore the remaining movement of the avatar. Assuming that goes well (never a safe bet), I hope to get started on some actual games the following day.


Day #480