Friday, September 14, 2012

Can't Make Physijs Holes

‹prev | My Chain | next›

Tonight, I would like to explore the ability to add holes in Three.js / Physijs shapes. Specifically, I would like to see if it is possible / easy to create a hole in a plane.

I start with a normal Physijs plane and place a ball on the plane:

    // Ground...
    var ground = new Physijs.PlaneMesh(
      new THREE.PlaneGeometry(2e2, 2e2),
      new THREE.MeshBasicMaterial({color: 0x7CFC00})
    // Ball ...
    ball = new Physijs.SphereMesh(
      new THREE.SphereGeometry(10),
   new THREE.MeshNormalMaterial
    ball.position.y = 10;
    ball.position.x = 50;
In the code editor, this looks like:

As for making holes, there is the ThreeCSG add-on for Three.js. I use that to BSP meshes for the ground and a hole:
    var ground_mesh = new THREE.Mesh(
      new THREE.PlaneGeometry(2e2, 2e2)
    var ground_bsp = new ThreeBSP( ground_mesh );
    var hole_geometry = new THREE.SphereGeometry( 20 );
    var hole_mesh = new THREE.Mesh( hole_geometry );
    var hole_bsp = new ThreeBSP( hole_mesh );

    var subtract_bsp = ground_bsp.subtract( hole_bsp );
Then I use the subtraction of the sphere from the plane to create a new Physijs object:
    var ground = new Physijs.ConvexMesh(
      // new THREE.PlaneGeometry(2e2, 2e2),
      new THREE.MeshBasicMaterial({color: 0x7CFC00}),

Only this does not quite make a hole:

At best that is a minor bump. And when viewed from above, I cannot even see that much:

Even if I convert this into a regular Three.js object instead of Physijs:
var ground = subtract_bsp.toMesh( new THREE.MeshNormalMaterial )
I still get a divet instead of a hole:

I will try other shapes tomorrow—perhaps a 1 pixel thin cube might work—but so far this does not seem promising. If anyone has any ideas, the code far is here.

Day #509


  1. Couple of things-

    CSG operations expect the geometry they are running on are closed - after all CSG stands for Constructive Solid Geometry. A plane is not a solid object, just a polygon facing one direction. This is why you get the divot when subtracting the sphere - there is no other geometry which closes the plane shape so the library treats it like the top face of a cube and simple subtracts into it.

    Second, at the moment Physijs has no support for concave objects. Any sort of mesh with holes will simply ignore the holes. Adding support for concave objects is on the road map but there are some optimizations I need to make to ThreeCSG first otherwise an object would be reduced down to individual faces for the pieces.

  2. Try to use Physijs.ConcaveMesh instead of Physijs.PlaneMesh