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})
    );
    scene.add(ground);
    
    // Ball ...
    ball = new Physijs.SphereMesh(
      new THREE.SphereGeometry(10),
   new THREE.MeshNormalMaterial
    );
    ball.position.y = 10;
    ball.position.x = 50;
    scene.add(ball);

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),
      subtract_bsp.toGeometry(),
      new THREE.MeshBasicMaterial({color: 0x7CFC00}),
      0
    );

    scene.add(ground);

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