Skip to main content

​
Overview

MyScene extends THREE.Scene and serves as the main container for the Pac-Man 3D game. It manages the WebGL renderer, multiple camera views, game state transitions, and user input handling.

​
Constructor

const scene = new MyScene(myCanvas)
​
myCanvas
string
The DOM selector for the canvas element where the scene will be rendered (e.g., “#WebGL-output”)

​
Properties

​
renderer
THREE.WebGLRenderer
The WebGL renderer instance that handles all scene rendering
​
freeCam
THREE.PerspectiveCamera
Free perspective camera with trackball controls for flexible viewing
​
topCam
THREE.PerspectiveCamera
Top-down orthographic-style camera positioned directly above the maze
​
sideCam
THREE.PerspectiveCamera
Side view camera for an alternative perspective of the game
​
camera
number
Current active camera index (1 = freeCam, 2 = topCam, 3 = sideCam)
​
cameraControl
THREE.TrackballControls
Camera controls for the free camera, allowing orbit, zoom, and pan
​
game
MyGame
The game instance containing maze, characters, and game logic
​
menu
MyMenu
The main menu instance displayed before game starts
​
status
string
Current application state: “MENU” or “PACMAN”
​
pickableObjects
Array<THREE.Object3D>
Array of objects that can be selected with the mouse (e.g., menu buttons)
​
controls
MyControls
Keyboard input handler for game controls

​
Methods

​
createCamera()

Initializes all three camera perspectives with appropriate positions and orientations. 
scene.createCamera()
Details:
  • Creates freeCam positioned at (6, 10.5, 35)
  • Creates topCam positioned directly above maze center
  • Creates sideCam positioned at (30, 2, 2)
  • Sets up TrackballControls for the free camera

​
createLights()

Sets up ambient and spotlight illumination for the scene. 
scene.createLights()
Details:
  • Adds ambient light with color 0xccddee and intensity 0.35
  • Adds spotlight at position (0, 35, 100) with intensity 0.5

​
createRenderer(myCanvas)

Creates and configures the WebGL renderer. 
const renderer = scene.createRenderer(myCanvas)
​
myCanvas
string
DOM selector for the canvas element
Returns: THREE.WebGLRenderer

​
getCamera()

Returns the currently active camera based on the camera property. 
const activeCamera = scene.getCamera()
Returns: THREE.PerspectiveCamera - The active camera (freeCam, topCam, or sideCam)

​
setCameraAspect(ratio)

Updates the aspect ratio of the active camera and its projection matrix. 
scene.setCameraAspect(16/9)
​
ratio
number
The new aspect ratio (width / height)

​
onWindowResize()

Handles window resize events by updating camera aspect ratio and renderer size. 
window.addEventListener('resize', () => scene.onWindowResize())

​
changeCamera(cam)

Switches to a different camera view. 
scene.changeCamera(2) // Switch to top camera
​
cam
number
Camera index: 1 for freeCam, 2 for topCam, 3 for sideCam

​
onKeyDown(event)

Handles keyboard input for camera switching and game controls. 
window.addEventListener('keydown', (event) => scene.onKeyDown(event))
​
event
KeyboardEvent
The keyboard event object
Key mappings:
  • 1 - Switch to free camera
  • 2 - Switch to top camera
  • 3 - Switch to side camera
  • Other keys are passed to game controls

​
onMouseMove(event)

Handles mouse movement for object selection and highlighting. 
window.addEventListener('mousemove', (event) => scene.onMouseMove(event))
​
event
MouseEvent
The mouse event object
Details:
  • Uses raycasting to detect mouse hover over pickable objects
  • Calls select() on hovered objects and deselect() on others

​
onMouseClick(event)

Handles mouse clicks for menu interaction and game start. 
window.addEventListener('click', (event) => scene.onMouseClick(event))
​
event
MouseEvent
The mouse event object
Details:
  • When clicking menu items, removes menu and starts game
  • Changes status to “PACMAN” and switches to top camera

​
update()

Main animation loop that updates and renders the scene. 
scene.update()
Details:
  • Calls requestAnimationFrame for continuous rendering
  • Updates camera controls
  • Makes title face the camera
  • Updates maze and game state
  • Renders the scene with the active camera

​
Example Usage

// Initialize the scene
const scene = new MyScene("#WebGL-output")

// Set up event listeners
window.addEventListener("resize", () => scene.onWindowResize())
window.addEventListener("keydown", (event) => scene.onKeyDown(event))
window.addEventListener("mousemove", (event) => scene.onMouseMove(event))
window.addEventListener("click", (event) => scene.onMouseClick(event))

// Start the animation loop
scene.update()

​
Camera Controls

The free camera (camera 1) supports:
  • Rotate: Left mouse drag
  • Zoom: Mouse wheel
  • Pan: Right mouse drag
Switch between cameras using number keys 1, 2, and 3.
  • MyGame - Game logic and character management
  • MyMaze - Procedural maze generation

Build docs developers (and LLMs) love

Get started for freeTalk to us