Now, we can move around with the player on the map, but the camera still points to the starting position. Let’s follow the player with the camera. In this chapter, we attach the camera to the player so that they move together. We also adjust how the shadow camera casts shadows.
We attached the camera to the scene in the main file. This way, it has a static position. Instead of that, we want to move it with the player. We could adjust its position at every animation frame just like the player, but it’s easier to add the camera directly to the player to move them together.
10 collapsed lines
import * as THREE from "three";import { Renderer } from "./components/Renderer";import { Camera } from "./components/Camera";import { DirectionalLight } from "./components/DirectionalLight";import { player } from "./components/Player";import { map, initializeMap } from "./components/Map";import { animateVehicles } from "./animateVehicles";import { animatePlayer } from "./animatePlayer";import "./style.css";import "./collectUserInput";
const scene = new THREE.Scene();scene.add(player);scene.add(map);
const ambientLight = new THREE.AmbientLight();scene.add(ambientLight);
const dirLight = DirectionalLight();scene.add(dirLight);
const camera = Camera();scene.add(camera);player.add(camera);
15 collapsed lines
initializeGame();
function initializeGame() { initializeMap();}
const renderer = Renderer();renderer.setAnimationLoop(animate);
function animate() { animateVehicles(); animatePlayer();
renderer.render(scene, camera);}10 collapsed lines
import * as THREE from "three";import { Renderer } from "./components/Renderer";import { Camera } from "./components/Camera";import { DirectionalLight } from "./components/DirectionalLight";import { player } from "./components/Player";import { map, initializeMap } from "./components/Map";import { animateVehicles } from "./animateVehicles";import { animatePlayer } from "./animatePlayer";import "./style.css";import "./collectUserInput";
const scene = new THREE.Scene();scene.add(player);scene.add(map);
const ambientLight = new THREE.AmbientLight();scene.add(ambientLight);
const dirLight = DirectionalLight();scene.add(dirLight);
const camera = Camera();scene.add(camera);player.add(camera);
15 collapsed lines
initializeGame();
function initializeGame() { initializeMap();}
const renderer = Renderer();renderer.setAnimationLoop(animate);
function animate() { animateVehicles(); animatePlayer();
renderer.render(scene, camera);}Once we attached the camera to the player, some strange things happen. The camera is moving together with the player now, but it’s also turning whenever the player turns, and moving up and down whenever the player jumps. This is not what we want. We want the camera to follow the player, but we want it to stay level and not turn or jump.
To ensure the camera follows the player but doesn’t turn or jump with it, we wrap the player objects into another group. This new group will be a container that moves horizontally on the map but doesn’t jump or turn. We add the camera to this group. Then, the original group containing the player objects won’t move horizontally anymore but keeps turning and jumping as before.
Let’s adjust the player animation to use this new structure.
import * as THREE from "three";import { endsUpInValidPosition } from "../utilities/endsUpInValidPosition";import type { MoveDirection } from "../types";
export const player = Player();
function Player() { const player = new THREE.Group();
23 collapsed lines
const body = new THREE.Mesh( new THREE.BoxGeometry(15, 15, 20), new THREE.MeshLambertMaterial({ color: "white", flatShading: true, }) ); body.castShadow = true; body.receiveShadow = true; body.position.z = 10; player.add(body);
const cap = new THREE.Mesh( new THREE.BoxGeometry(2, 4, 2), new THREE.MeshLambertMaterial({ color: 0xf0619a, flatShading: true, }) ); cap.position.z = 21; cap.castShadow = true; cap.receiveShadow = true; player.add(cap);
const playerContainer = new THREE.Group(); playerContainer.add(player);
return playerContainer;}
32 collapsed lines
export const position: { currentRow: number; currentTile: number;} = { currentRow: 0, currentTile: 0,};
export const movesQueue: MoveDirection[] = [];
export function queueMove(direction: MoveDirection) { const isValidMove = endsUpInValidPosition( { rowIndex: position.currentRow, tileIndex: position.currentTile, }, [...movesQueue, direction] );
if (!isValidMove) return;
movesQueue.push(direction);}
export function stepCompleted() { const direction = movesQueue.shift();
if (direction === "forward") position.currentRow += 1; if (direction === "backward") position.currentRow -= 1; if (direction === "left") position.currentTile -= 1; if (direction === "right") position.currentTile += 1;}import * as THREE from "three";import { endsUpInValidPosition } from "../utilities/endsUpInValidPosition";
export const player = Player();
function Player() { const player = new THREE.Group();
23 collapsed lines
const body = new THREE.Mesh( new THREE.BoxGeometry(15, 15, 20), new THREE.MeshLambertMaterial({ color: "white", flatShading: true, }) ); body.castShadow = true; body.receiveShadow = true; body.position.z = 10; player.add(body);
const cap = new THREE.Mesh( new THREE.BoxGeometry(2, 4, 2), new THREE.MeshLambertMaterial({ color: 0xf0619a, flatShading: true, }) ); cap.position.z = 21; cap.castShadow = true; cap.receiveShadow = true; player.add(cap);
const playerContainer = new THREE.Group(); playerContainer.add(player);
return playerContainer;}
29 collapsed lines
export const position = { currentRow: 0, currentTile: 0,};
export const movesQueue = [];
export function queueMove(direction) { const isValidMove = endsUpInValidPosition( { rowIndex: position.currentRow, tileIndex: position.currentTile, }, [...movesQueue, direction] );
if (!isValidMove) return;
movesQueue.push(direction);}
export function stepCompleted() { const direction = movesQueue.shift();
if (direction === "forward") position.currentRow += 1; if (direction === "backward") position.currentRow -= 1; if (direction === "left") position.currentTile -= 1; if (direction === "right") position.currentTile += 1;}In the utility functions of the animatePlayer function, we need to adjust how we set the player’s position and rotation to work with the new structure. When moving the player along the x and y axes, we need to move the outer group, but when the player turns or jumps, we need to adjust the inner group.
These functions receive a reference to the outer group. We set the x and y positions as before. When we set the position or rotation along the z-axis, we set it on the inner group with player.children[0].
28 collapsed lines
import * as THREE from "three";import { player, position, movesQueue, stepCompleted,} from "./components/Player";import { tileSize } from "./constants";
const moveClock = new THREE.Clock(false);
export function animatePlayer() { if (!movesQueue.length) return;
if (!moveClock.running) moveClock.start();
const stepTime = 0.2; // Seconds it takes to take a step const progress = Math.min(1, moveClock.getElapsedTime() / stepTime);
setPosition(progress); setRotation(progress);
// Once a step has ended if (progress >= 1) { stepCompleted(); moveClock.stop(); }}
function setPosition(progress: number) { const startX = position.currentTile * tileSize; const startY = position.currentRow * tileSize; let endX = startX; let endY = startY;
if (movesQueue[0] === "left") endX -= tileSize; if (movesQueue[0] === "right") endX += tileSize; if (movesQueue[0] === "forward") endY += tileSize; if (movesQueue[0] === "backward") endY -= tileSize;
player.position.x = THREE.MathUtils.lerp(startX, endX, progress); player.position.y = THREE.MathUtils.lerp(startY, endY, progress); player.children[0].position.z = Math.sin(progress * Math.PI) * 8;}
function setRotation(progress: number) { let endRotation = 0; if (movesQueue[0] == "forward") endRotation = 0; if (movesQueue[0] == "left") endRotation = Math.PI / 2; if (movesQueue[0] == "right") endRotation = -Math.PI / 2; if (movesQueue[0] == "backward") endRotation = Math.PI;
player.children[0].rotation.z = THREE.MathUtils.lerp( player.children[0].rotation.z, endRotation, progress );}28 collapsed lines
import * as THREE from "three";import { player, position, movesQueue, stepCompleted,} from "./components/Player";import { tileSize } from "./constants";
const moveClock = new THREE.Clock(false);
export function animatePlayer() { if (!movesQueue.length) return;
if (!moveClock.running) moveClock.start();
const stepTime = 0.2; // Seconds it takes to take a step const progress = Math.min(1, moveClock.getElapsedTime() / stepTime);
setPosition(progress); setRotation(progress);
// Once a step has ended if (progress >= 1) { stepCompleted(); moveClock.stop(); }}
function setPosition(progress) { const startX = position.currentTile * tileSize; const startY = position.currentRow * tileSize; let endX = startX; let endY = startY;
if (movesQueue[0] === "left") endX -= tileSize; if (movesQueue[0] === "right") endX += tileSize; if (movesQueue[0] === "forward") endY += tileSize; if (movesQueue[0] === "backward") endY -= tileSize;
player.position.x = THREE.MathUtils.lerp(startX, endX, progress); player.position.y = THREE.MathUtils.lerp(startY, endY, progress); player.children[0].position.z = Math.sin(progress * Math.PI) * 8;}
function setRotation(progress) { let endRotation = 0; if (movesQueue[0] == "forward") endRotation = 0; if (movesQueue[0] == "left") endRotation = Math.PI / 2; if (movesQueue[0] == "right") endRotation = -Math.PI / 2; if (movesQueue[0] == "backward") endRotation = Math.PI;
player.children[0].rotation.z = THREE.MathUtils.lerp( player.children[0].rotation.z, endRotation, progress );}As the player moves further away, another strange behavior occurs. At one point, the objects no longer cast shadows.
If we zoom out even more and add a helper box to show the shadow camera’s frustum, we can see that some parts of the game are now outside it. Here, the gray box shows the shadow camera’s frustum and the red rectangle represents its projection to the ground. Drag the scene to see how it works.
Shadows are only calculated within the frustum of the shadow camera, which is statically attached to the directional light. We need to attach the directional light to the player as well.
We need to attach the directional light to the player to make the shadows follow the player. We can do that in our main file, just like we did it with the camera.
10 collapsed lines
import * as THREE from "three";import { Renderer } from "./components/Renderer";import { Camera } from "./components/Camera";import { DirectionalLight } from "./components/DirectionalLight";import { player } from "./components/Player";import { map, initializeMap } from "./components/Map";import { animateVehicles } from "./animateVehicles";import { animatePlayer } from "./animatePlayer";import "./style.css";import "./collectUserInput";
const scene = new THREE.Scene();scene.add(player);scene.add(map);
const ambientLight = new THREE.AmbientLight();scene.add(ambientLight);
const dirLight = DirectionalLight();scene.add(dirLight);player.add(dirLight);
const camera = Camera();player.add(camera);
15 collapsed lines
initializeGame();
function initializeGame() { initializeMap();}
const renderer = Renderer();renderer.setAnimationLoop(animate);
function animate() { animateVehicles(); animatePlayer();
renderer.render(scene, camera);}10 collapsed lines
import * as THREE from "three";import { Renderer } from "./components/Renderer";import { Camera } from "./components/Camera";import { DirectionalLight } from "./components/DirectionalLight";import { player } from "./components/Player";import { map, initializeMap } from "./components/Map";import { animateVehicles } from "./animateVehicles";import { animatePlayer } from "./animatePlayer";import "./style.css";import "./collectUserInput";
const scene = new THREE.Scene();scene.add(player);scene.add(map);
const ambientLight = new THREE.AmbientLight();scene.add(ambientLight);
const dirLight = DirectionalLight();scene.add(dirLight);player.add(dirLight);
const camera = Camera();player.add(camera);
15 collapsed lines
initializeGame();
function initializeGame() { initializeMap();}
const renderer = Renderer();renderer.setAnimationLoop(animate);
function animate() { animateVehicles(); animatePlayer();
renderer.render(scene, camera);}Directional lights shine from their position toward a target. By default, the target is the origin [0, 0, 0]. This was fine when the light was attached to the scene, but now that it’s attached to the player, we also need to adjust the target. Otherwise, the light and shadows will keep changing direction.
Let’s set the directional light’s target in the main file to the player.
10 collapsed lines
import * as THREE from "three";import { Renderer } from "./components/Renderer";import { Camera } from "./components/Camera";import { DirectionalLight } from "./components/DirectionalLight";import { player } from "./components/Player";import { map, initializeMap } from "./components/Map";import { animateVehicles } from "./animateVehicles";import { animatePlayer } from "./animatePlayer";import "./style.css";import "./collectUserInput";
const scene = new THREE.Scene();scene.add(player);scene.add(map);
const ambientLight = new THREE.AmbientLight();scene.add(ambientLight);
const dirLight = DirectionalLight();dirLight.target = player;player.add(dirLight);
const camera = Camera();player.add(camera);
15 collapsed lines
initializeGame();
function initializeGame() { initializeMap();}
const renderer = Renderer();renderer.setAnimationLoop(animate);
function animate() { animateVehicles(); animatePlayer();
renderer.render(scene, camera);}10 collapsed lines
import * as THREE from "three";import { Renderer } from "./components/Renderer";import { Camera } from "./components/Camera";import { DirectionalLight } from "./components/DirectionalLight";import { player } from "./components/Player";import { map, initializeMap } from "./components/Map";import { animateVehicles } from "./animateVehicles";import { animatePlayer } from "./animatePlayer";import "./style.css";import "./collectUserInput";
const scene = new THREE.Scene();scene.add(player);scene.add(map);
const ambientLight = new THREE.AmbientLight();scene.add(ambientLight);
const dirLight = DirectionalLight();dirLight.target = player;player.add(dirLight);
const camera = Camera();player.add(camera);
15 collapsed lines
initializeGame();
function initializeGame() { initializeMap();}
const renderer = Renderer();renderer.setAnimationLoop(animate);
function animate() { animateVehicles(); animatePlayer();
renderer.render(scene, camera);}