Breaking Bad Walter White Animation

AI Overview: Walter White 3D Animation

This project is an interactive 3D animation of the character Walter White from the series Breaking Bad. It features a stylized, "blocky" version of the character that exists within a web-based 3D environment. The primary purpose of the project is to demonstrate interactive 3D modeling and state-switching using the Three.js library.

The animation is highly responsive to user input. As you move your mouse across the screen, Walter’s head and body rotate to "follow" the cursor. Additionally, the project features a "transformation" mechanic: when the user clicks and holds the mouse (or touches the screen), Walter switches from his iconic "Heisenberg" look (black hat and jacket) to his yellow hazmat "cook" suit, while the background color shifts from green to blue.

How It Works

The project is built using Three.js, a popular JavaScript library for displaying 3D graphics in a browser. It initializes a scene, a camera, and a renderer that draws the 3D objects onto an HTML <canvas> element. The character himself is constructed programmatically using various BoxGeometry shapes that are grouped together to move as a single entity.

camera = new THREE.PerspectiveCamera(65, container.width / container.height, 1, 2000);
camera.position.z = 2000;
camera.position.y = 400;

This snippet sets up the "lens" through which we view the 3D world, positioning the camera so Walter is centered and visible.

To make the character look like Walter White, the code defines a Walter function that creates and colors individual cubes for his hat, glasses, beard, and clothes. These parts are then attached to a main group so they can be animated together.

var head = new THREE.BoxGeometry(300, 350, 280);
this.head = new THREE.Mesh(head, this.skinMat);
this.head.position.y = 160;
this.head.position.z = 400;

This code defines the dimensions and position of Walter's head using a simple 3D box.

The interactivity is handled by event listeners that track the mouse position. A custom calc function translates the 2D pixel coordinates of your mouse into 3D rotation values (radians), allowing the character to lean and look toward your cursor.

function mousemove(e) {
    mouse.x.current = e.clientX;
    mouse.y.current = e.clientY;
    mouse.x.calc = mouse.x.current - (container.width / 2);
    mouse.y.calc = mouse.y.current - (container.height / 2);
}

This function captures the mouse position and calculates how far it is from the center of the screen to determine the rotation angle.

Finally, the "transformation" logic lives inside the rotate function. It checks a boolean variable called isUp (triggered by clicking). If true, it hides the hat by scaling it to zero, changes the material colors to yellow/orange, and increases the scale of the beard.

if (isUp) {
    this.body.material.color = new THREE.Color(this.informalSmokingMat);
    this.hatTop.scale.x = this.hatBottom.scale.x = 0;
    this.beard.scale.y += 0.02;
}

This logic handles the visual switch between Walter's two personas by modifying the properties of the 3D meshes in real-time.