Screenshot of a giant burger floating in space, with a toggle menu on the righthand side to toggle the condinments on and off.

Photo by Ben Emson

Claude Code 3D Space Burger

Author: Ben Emson

Coding tools are moving along quickly. Recently Anthropic launched Claude 3.7 sonnet and Claude Code: https://www.anthropic.com/news/claude-3-7-sonnet. I was on the waitlist for Claude Code, and now have access. It’s an excellent little command line tool that can look at your code base and lets you interact with it through the LLM. If you have ever used Aider https://aider.chat it is very similar. There are a number of these command line tools coming out now, and when you get used to using them, can give you a real boost in your development.

Space Burger Simulation

Use the Arrow or WASD keys to move the camera, along with the mouse to zoom in and out. The items on the left are toggles you can turn on and off to change the condiments of your burger. See below for the prompt that generated this burger.

Claude Code - Space Burger!

This was the initial prompt that created the code. It did actually have a few errors. However I fired up Claude Code and chatted through fixing it and it resolved quickly.

**Prompt: Build a 3D Space Burger**

Develop a web-based 3D game demo that features a procedurally generated floating burger with smooth movement and proper orientation. Follow these specifications:

- **Overview:**
Create a pixel burger floating in space, with stars in the background
Add controls to change the view point.
Make the burger out of intricate 3D pixels. Make each pixel look beautiful with excellent styling. The overall quality is outstanding for a pixel image.
Add a menu in the top right that adds or removes the burger bun, the burger, the cheese, the bacon, the pickle, tomatoes, ketchup, mustard, etc.

- **Libraries & Dependencies:**
  - **Three.js (r128):** Use Three.js (version r128) via a CDN, for example, [cdnjs](https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js).
  - **OrbitControls:** Implement camera control with OrbitControls from [jsDelivr](https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js).

- **Scene Setup:**
  - Create a Three.js scene with a perspective camera.
  - Set up a WebGL renderer to cover the entire browser window.
  - Include lighting (e.g., HemisphereLight and DirectionalLight) to properly illuminate the scene.
  - Add a debug overlay (an HTML element) that shows real-time data like the soldier’s position and rotation.

- **Movement & Controls:**
  - Implement WASD keyboard controls for moving the camera.
  - Calculate movement direction using the camera’s forward (XZ-plane) and left vectors.

- **Responsive Design:**
  - Handle window resize events to update the camera’s aspect ratio and the renderer’s size.

Give me the whole HTML file!

If you like this and want to see more follow me on x.com/emson.

Thank you!
Ben