Grouping Three.js Objects to Make a Hole

‹prev | My Chain | next›

I found yesterday that my initial attempt at making holes in Three.js / Physijs shapes was ill-founded. As explained in comments by Chandler Prall, using ThreeCSG to subtract "holes" will not work—at least not yet.

So tonight, I try an alternative approach. Specifically, I will leave a hole in the center and build stuff around it. I start with small plane/thin cubes:

    var g1 = new Physijs.BoxMesh(
      new THREE.CubeGeometry(50, 2, 50),
      new THREE.MeshBasicMaterial({color: 0x7CFC00}),
      0
    );
    g1.position.x = 40;
    scene.add(g1);

After positioning four of these, I have a square hole:

Recalling that grouping Physijs objects involves adding them to the grouping object before the the grouping object is added to the scene, I redo the ground object:

    ground = new Physijs.BoxMesh(
      new THREE.CubeGeometry(50, 2, 200),
      new THREE.MeshBasicMaterial({color: 0x7CFC00}),
      0
    );
    
    var g2 = new Physijs.BoxMesh(
      new THREE.CubeGeometry(50, 2, 200),
      new THREE.MeshBasicMaterial({color: 0x7CFC00}),
      0
    );
    g2.position.x = 75;
    ground.add(g2);

    //...
    scene.add(ground);

After mucking with the sizes some, I have the following object to support a ball:

Which means that I can tilt the entire playing surface to roll the ball in the hole:

That is a quick and dirty implementation of a hole, but it just might do for a Gaming JavaScript game.




Day #510