Tuesday, August 14, 2012

Rocks in Physijs / Three.js

‹prev | My Chain | next›

Last night I managed to come with a passable solution for moving (and stopping) a player in a Three.js game governed by the Physijs physics engine. I may revisit that solution as it did not feel as solid as the one I came up with for Gladius and Box2D.js. But first, I would like to understand how to make immovable objects in Physijs.

Ultimately, I plan to make an invisible fence to keep my player on its tropical island:

But first, I need to figure out how to make static objects. Happily, there is a wiki page for that. Following along, I set the mass of the ball in my scene to zero, which should make it static:
  // A ball
  var ball = new Physijs.SphereMesh(
    new THREE.SphereGeometry(100),
    new THREE.MeshNormalMaterial(),
  ball.position.z = -500;
  ball.position.y = 150;
And it works. To an extent.

When I run into the ball, the ball remains static. But, unlike in Gladius and Box2D, my Physijs avatar bounces off of the ball and goes into a tailspin:

And keeps spinning for quite a while:

I cannot give the avatar zero weight, because then it will not move at all. So, instead, I make it really, really heavy:
  a_frame = new Physijs.BoxMesh(
    new THREE.CubeGeometry(250, 250, 250),
    new THREE.Material(),
    1000* 1000
But that has almost no effect. I think the avatar may hit the ground a little (thought it shouldn't), but that aside, the tailspin behavior continues.

It helps a little to convert the ball's Physijs mesh from a sphere to a box:
  // A ball
  var ball = new Physijs.BoxMesh(
    new THREE.SphereGeometry(100),
    new THREE.MeshNormalMaterial(),
Now, if I hit the box/ball head on, or exactly from the side, my avatar stops cold:

But, if I hit the corner (my avatar's corner on the "ball" corner), I am again in a tailspin.

I really think that I want linear damping here, but I still cannot figure it out. I am not even sure what the arguments are. From the code, it takes two arguments (linear and angular):
 // Physijs.Mesh.setDamping
 Physijs.Mesh.prototype.setDamping = function ( linear, angular ) {
But I am not clear what kind of objects linear and angular are. I try arrays, objects and Vector3s:
  // a_frame.setDamping({x: 100, y: 100, z: 0});
  // a_frame.setDamping([100, 100, 0], [100, 100, 100]);
    new THREE.Vector3( 100, 1000, 0 ),
    new THREE.Vector3( 1000, 1000, 1000 )
But none see to have any effect. I can still get in a tailspin.

I have to call it a night here. I think I will give movement one more try tomorrow.

Day #478


  1. The arguments for setDamping are floating-point numbers ranging from 0 (min damping) to 1 (max damping). Chandler Prall mentions it here.

    1. Awesome! I thought I had tried floats the first night that I had played with this stuff, but perhaps I started with >1, which threw it all off. I'll give this a try.

      Much thanks for the pointer!