BabylonJS and Blazor - The Player Camera

For this article we will go over The Player Camera implemented in C#, we will use the logic from the BabylonJS Guided Learning, link provided below.

Checkout BabylonJS and Blazor - Character Movement Part 1, the next step in the series!

Demo and Source Code

A running Demo of what should be seen when the application is Set Up and running. You can open the below demo or by going to the BabylonJS Blazor Step 04 website. Use the arrow keys to move the camera.

Currently there is an input bug, that was fix in future steps, where the controls do not work on first focus, click out and back into the game window to fix.

You can also see the full source code in GitHub here: canhorn/BabylonJS.Blazor.Game.Tutorial at step/04_The-Player-Camera

Compare the original step in the Series here: The Player Camera | Babylon.js Documentation (babylonjs.com)

Implementation Overview

This was a low code, leading to a short article, step just adding a UniversalCamera and attaching it to the Player. The camera is not full implemented, since the Player does not move yet. The camera just floats around the Player model, so it behaves more like a model viewer.

This article was pretty short, so be on the lookout for another article very soon! Where we will go over Character Movement

Source Code

You can see the bulk of the work done in this step below, where we add a UniversalCamera to the Player Code.

private void SetupPlayerCamera()
{
    var cameraRoot = new TransformNode("root");
    _cameraRoot = cameraRoot;
    cameraRoot.position = Vector3.Zero();
    cameraRoot.rotation = new Vector3(0, (decimal)System.Math.PI, 0);

    var yTilt = new TransformNode("y-tilt");
    yTilt.rotation = ORIGINAL_TILT;
    _yTilt = yTilt;
    yTilt.parent = _cameraRoot;

    var camera = new UniversalCamera(
        "cam",
        new Vector3(0, 0, -30),
        _scene
    );
    _camera = camera;
    camera.lockedTarget = cameraRoot.position;
    camera.fov = 0.47m;
    camera.parent = yTilt;

    _scene.activeCamera = camera;
    camera.attachControl(true);
}