Three.js 3D Arena Game (Cyber Nexus Arena)

Overview

A browser-based 3D action game build, “Cyber Nexus Arena”, built on Three.js/WebGL. It sets up a real-time 3D scene with a player, environment props, enemies, animation mixing, and floating combat damage numbers.

Why It Exists

A step up from 2D canvas work into real 3D: a sandbox to explore Three.js scene graphs, cameras, raycasting for interaction, and animation mixers for a playable arena experience in the browser.

What We Built

index.html (styled with an Orbitron sci-fi theme), game.js, and game3d.js driving a Three.js pipeline, scene, camera, renderer, a player, arrays of trees and wolves (enemies), damageNumbers, plus a clock, raycaster, mouse, and animation mixer. The result is an interactive 3D arena loop.

Technologies & Approach

Three.js over WebGL for 3D rendering, raycasting for pointer interaction, and an animation mixer for character motion, all in vanilla JS to keep the focus on the engine concepts.

Outcome / Impact

A playable 3D build that proves out core Three.js patterns (scene setup, enemies, raycast interaction, animation). production; archived.

Capabilities Demonstrated

• Real-time 3D rendering with Three.js / WebGL
• Scene-graph, camera, and raycast interaction programming
• Character animation and game-loop architecture