Saturday, September 15, 2012

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

No comments:

Post a Comment