Three.js Shifting Frame of Reference

‹prev | My Chain | next›

The last outstanding question in my Three.js Physijs is how to move the camera along with the player as both move up:

I had thought I might be able to keep both in the same frame of reference, but, upon further reflection, I don't think that will work. The player really belongs in the platform frame of reference so that physics can work on it. The camera, on the other hand, defines a different frame of reference—one that includes the game-over line at the bottom.

Since they need to be in different frames of reference, I need to figure out how to move the camera along with the player as it moves up. This turns out to be fairly easy:

  function moveHigher() {
    if (player.position.y < camera.position.y + 100) return;
    camera.position.y = camera.position.y + 100;     
  }

If the player is below the camera + 100 mark, then this function does nothing. If the player has reached that level, then I bump the camera up 100. If I end up including this in 3D Game Programming for Kids, then I will likely have them tween the camera up rather than jerking it up like this.

This feels like another function that does not need to be directly in the animate() function, but I stick it there anyway for now:

  function animate() {
    requestAnimationFrame(animate);
    if (pause) return;
    scene.simulate(); // run physics

    resetPlayerFallingZ();
    moveHigher();
    gameOver();
    renderer.render(scene, camera);
  }
  animate();

While I am at it, I also add a gameOver() function to ensure that the player has not hit the bottom of the screen:

  function gameOver() {
    if (player.position.y > camera.position.y - height/2) return;
    console.log("GAME OVER!!!");
    pause = true;
  }

That seems a reasonable stopping point for tonight. I have enough of this game to be able to include it in the book if I so choose. It offers some level of familiarity for kids so it has that going for it. I am not sold on it offering much new for them. Still, it is good to have this in reserve in case I need to rework some of the other existing chapters or in case some of the planned chapters do not pan out.

(the code)

Day #643