Turn Your Name into a 3D Sculpture

Create a browser-based 3D sculpture that rebuilds from any name.

Introduction

30 Second Summary

A name usually lives as a flat line on a screen. The same letters can feel completely different once they gain height, shadow, and movement.

In this project, you will use Three.js to transform any name into a rotating 3D structure made from stacked blocks. You will control it through a text input before sharing the finished page through a deployed URL.

What You'll Build

Picture typing your name into a live page before watching a lit sculpture rise from the letters, rotate slowly, and respond as you drag the camera around it.

By the end of this project, you'll have:

A lit 3D name sculpture that stands on a virtual stage while you orbit around it from different angles.
A block-based architectural structure that grows from sampled letter shapes instead of looking like flat text.
A live browser experience that rebuilds the sculpture whenever someone types a new name, plus a deployed URL you can open on another device.
An optional Secret Mission to push your 3D browser skills further.

Are there any prerequisites?

You will need Node plus a browser that supports WebGL. Basic JavaScript knowledge plus some comfort with npm helps, though no previous 3D experience is required.

The project runs in your browser with no backend, so the full build costs $0.

Before We Start

A browser-based Three.js sculpture depends on a few tools before any geometry can render. Node.js runs the project tooling through npm.

You also need Git to track your work. GitHub stores the finished source online. Vercel turns that source into a page you can open on another device.

In this step, get ready to:

Install Node.js with npm.
Prepare Git, a code editor, and a browser that can render 3D graphics.
Sign in to GitHub and Vercel.

Install and verify Node.js

Node.js provides the local runtime that Vite uses throughout this project. Installing Node.js also gives you npm for downloading project packages.

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Search for your terminal application.
Open the matching result.
Check that Node.js and npm are available by running:

node -v
npm -v

What Do These Checks Prove?

The first command asks Node.js to print its installed version.
The second command asks npm to print its installed version.

✔️ I see two version numbers

Your local JavaScript tools are ready. Node.js can run the project tooling while npm installs the packages it needs.

ⓧ A command is not available

Install the LTS release of Node.js to add both tools to your computer.

Open the official Node.js download page.
Choose the release labelled LTS.
Download the installer for your operating system.
Run the downloaded installer with its default options.
Restart your terminal after the installation completes.
Run the same two version checks again.

You should now see one version number for Node.js and another for npm.

Still Missing Node.js or npm?

Close every terminal window before opening a fresh one. This gives the terminal a chance to detect the newly installed commands.

If either check still fails, help me troubleshoot my Node.js and npm installation.

Prepare Git, your editor, and your browser

Git records each version of your source before GitHub stores it online. Your browser also needs WebGL support to draw the finished sculpture.

Switch back to the terminal from the previous substep.
Check that Git is available by running:

git --version

What Does This Check Prove?

Git prints its installed version when the command is available. That result confirms your terminal can use Git later when you publish the project.

✔️ I see a Git version

Git is ready to track your project. You have the local version-control tool needed for publishing.

ⓧ Git is not available

The official Git installer provides the command needed for this project.

Open the official Git installation page.
Choose your operating system.
Download the recommended installer.
Run the installer with its default options.
Restart your terminal after the installation completes.
Run the same Git version check again.

You should now see a line containing the installed Git version.

Still Missing Git?

A terminal that stayed open during installation may still use its old command path. Close it before opening a fresh terminal.

If the check still fails, help me troubleshoot my Git installation.

A code editor gives you a place to build the page. A WebGL-capable browser gives you the visual proof that your computer can render its 3D scene.

✔️ I have an editor and browser

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Search for the name of your code editor.
Open the matching editor.
Use your operating system search to find your browser.
Open the matching browser.
Visit the official Three.js examples gallery.
Open one 3D example from the gallery.

You should see an animated 3D scene. That visible scene confirms your browser can render the graphics used in this project.

ⓧ I need an editor or browser

You can use Visual Studio Code as your editor. Google Chrome provides a modern browser for testing the project.

Install Visual Studio Code if you need a code editor.
Install Google Chrome if you need a current browser.
Use your operating system search to open the installed editor.
Use your operating system search to open the installed browser.
Visit the official Three.js examples gallery.
Open one 3D example from the gallery.

You should see an animated 3D scene in the browser. Your local visual workspace is now ready.

Sign in to GitHub and Vercel

GitHub gives your source code an online home. Vercel connects to that home when you deploy the final page.

Keep Sign-In Details Private

Account setup is the only part of this step that handles credentials. Enter your password only on the official GitHub or Vercel pages.

Open the official GitHub account page.
Follow the prompts to create a personal account if you need one.
Verify your email address if GitHub requests it.
Sign in to your GitHub account.
Confirm that your profile is visible in the page header.

Why Connect Vercel to GitHub?

The connection lets Vercel access repositories you choose for deployment. You can review the requested access before approving it.

Open the official Vercel sign-up page.
Click Continue with GitHub.
Approve the authorization request after reviewing its access.
Confirm that your Vercel dashboard loads while you are signed in.

Before you run the final check, how many version lines do you expect the terminal to print?

Return to the terminal and verify all three command-line tools by running:

node -v
npm -v
git --version

What Does the Final Check Cover?

The first line confirms the Node.js runtime is available.
The second line confirms npm is available for installing packages.
The third line confirms Git is available for tracking project files.

You should see three version lines. Each line proves that one part of your local development environment is ready.

Return to GitHub and confirm that you remain signed in.
Switch to Vercel and confirm that its dashboard remains available.

That is the foundation sorted. Your computer can now build the sculpture while your accounts are ready to publish it.

✔️ Awesome, I've got everything!

Your local tools are available. Your publishing accounts are also signed in.

ⓧ I'd like to double check the full code

For this setup checkpoint, confirm that your environment matches the following state.

Node.js and npm are installed.
Git is available in your terminal.
A code editor and modern browser are available.
GitHub and Vercel accounts are signed in.

Your local tools and publishing accounts are ready. Next up, you will create the Vite project and turn the browser into a lit 3D stage.

Set Up the Three.js Stage

A 3D name sculpture needs a stage before it needs letters. The stage gives the camera a clear place to look.

In this step, you will scaffold a browser project with Vite. You will use Three.js to render a lit ground plane.

The finished stage responds when you drag across it. This interaction proves that the camera can orbit the space where your sculpture will stand.

In this step, get ready to:

Scaffold the name-sculpture Vite project.
Install the Three.js dependency.
Render a lit stage with orbit controls.

Scaffold the Vite project

Vite creates the browser project structure. It also provides the development server that refreshes your page when files change.

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Search for your terminal app.
Open the matching terminal result.
Move to your Desktop by running this command:

cd ~/Desktop

What does this command do?

The cd command changes the terminal's current location. Your new project will appear on the Desktop where it is easy to find.

A Package Prompt Can Appear

The first scaffold can ask for permission to download the project generator. This is an expected part of running the latest Vite scaffolder.

Approve the package download if the terminal requests permission.

Create the vanilla JavaScript project by running this command:

npm create vite@latest name-sculpture -- --template vanilla --no-interactive

What does this command do?

The Vite scaffolder creates the name-sculpture folder. The vanilla template gives you plain JavaScript without a UI framework.

The --no-interactive flag skips the template picker. The project name comes directly from the command.

You should see confirmation that the project was created inside the name-sculpture folder.

Project Folder Missing?

Check that your terminal is connected to the internet. The scaffolder needs to download its package before it can create the folder.

If the command stops at a permission prompt, approve the download before waiting for the project confirmation.

Help me troubleshoot the Vite project scaffold.

The scaffold includes Vite's starter files. Those files need their packages before the browser can run them.

Enter the project folder by running the first command below:
Install the scaffolded project packages by running the second command below:
Install Three.js by running the final command below:

cd name-sculpture
npm install
npm install three

What Do These Commands Set Up?

The first line moves the terminal into the name-sculpture folder.
The second line installs the packages already listed in package.json.
The final line adds Three.js to the project dependencies.

You should see package installation output. Your terminal should return to a prompt inside the name-sculpture folder.

Dependency Installation Failed?

Confirm that the terminal path ends with name-sculpture. Running an install from the Desktop cannot find this project's package.json file.

A network failure can also interrupt the package download. Reconnect before trying the installation again.

Help me fix the dependency installation.

The development server turns the project files into a page your browser can load. This first run confirms that the scaffold works before you replace its starter content.

Before you start the server, what kind of starter page do you expect the vanilla template to show?

Start the Vite development server by running this command:

npm run dev

What does this command do?

The project's development script starts Vite. The terminal prints a local address that points to your running page.

Keep this terminal running while you build the stage. Vite will reload the page when you save your code.

Open the local address shown in the terminal with your browser.

You should see the vanilla Vite starter page. This confirms that the project can run in your browser.

Starter Page Not Loading?

Check that the terminal still shows the development server as running. A closed terminal stops the local page.

Use the exact local address printed by your terminal. Another project may already be using the usual port.

Help me open the running Vite page.

Create the lit stage

A browser-based 3D scene is drawn onto a canvas through WebGL. The canvas needs the full browser window so the stage has room to fill the screen.

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Search for your code editor.
Open the matching code editor result.
Use the editor's folder picker to select the name-sculpture folder on your Desktop.
Select src/style.css from the editor's file explorer.
Select all existing content with Cmd+A on macOS or Ctrl+A on Windows.
Replace the selected content with this stylesheet:

/* Make the Three.js canvas fill the browser window. */
html,
body,
#app {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Remove the canvas baseline gap. */
canvas {
  display: block;
}

What Does This Stylesheet Do?

The page elements fill the browser's available width.
The page elements fill the browser's available height.
The hidden overflow prevents scrollbars around the canvas.
The canvas displays as a block so it has no baseline gap.

Save src/style.css with Cmd+S on macOS or Ctrl+S on Windows.
Return to the running page in your browser.

The starter page should now reach the edges of the browser without page gutters or scrollbars.

Page Still Has Outer Gaps?

Confirm that you edited src/style.css. The stylesheet must remain imported by src/main.js.

Make sure the file is saved. Vite only reloads changes that reach the file system.

Help me remove the gaps around the canvas.

Three.js needs a scene to hold objects. It also needs a camera to choose the view.

A renderer turns that view into pixels on the canvas. The first render gives you a dark empty space before the ground is added.

Select src/main.js from the editor's file explorer.
Select all existing content with Cmd+A on macOS or Ctrl+A on Windows.
Replace the selected content with this scene foundation:

// Load the Three.js engine.
import * as THREE from 'three';

// Apply the full-window canvas styles.
import './style.css';

// Hold every object that belongs to the 3D world.
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x10131a);

// Frame the stage from above and in front.
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(6, 5, 8);
camera.lookAt(0, 0, 0);

// Draw the scene into a canvas inside the app element.
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.querySelector('#app').appendChild(renderer.domElement);

// Draw the empty scene once so the canvas becomes visible.
renderer.render(scene, camera);

How Does the Scene Foundation Work?

The scene stores everything that Three.js can render.
The perspective camera creates depth similar to a physical camera.
The renderer creates the canvas that appears inside #app.
The first render draws the current camera view.

Save src/main.js.
Return to the running page in your browser.

You should see a dark canvas filling the browser window. This proves that the renderer has created a working Three.js view.

Dark Canvas Missing?

Check the terminal for a JavaScript error. A mistyped import or missing bracket can stop the canvas from being created.

Confirm that src/main.js still imports src/style.css through its relative path.

Help me restore the Three.js canvas.

The dark canvas proves that the camera can see the scene. A ground plane gives that empty space a visible surface.

A standard material responds to light. The directional light reveals the plane's angle from the camera.

Scroll to the bottom of src/main.js.
Add this code below the existing render line:

// Build the platform where the sculpture will stand.
const groundGeometry = new THREE.PlaneGeometry(20, 20);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x4f596b, roughness: 0.85 });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

// Shine one directional light across the platform.
const light = new THREE.DirectionalLight(0xffffff, 3);
light.position.set(4, 8, 4);
scene.add(light);

// Redraw the scene with its lit ground plane.
renderer.render(scene, camera);

How Does the Stage Become Visible?

The plane geometry creates a flat square surface.
The standard material reacts to the directional light.
The plane rotates onto the horizontal axis to become a floor.
The final render redraws the scene after the new objects are added.

Save src/main.js.
Return to the running page in your browser.

You should see a large gray platform against the dark background. The surface should appear brighter near the light.

Ground Plane Not Visible?

Check that the plane rotation uses the negative half-turn around the horizontal axis. A plane left upright can disappear from this camera angle.

Confirm that both the ground mesh and directional light are added to the scene.

Help me find the missing ground plane.

Add orbit controls and verify the stage

OrbitControls converts pointer movement into camera movement around a target. A render listener redraws the view whenever the camera changes.

Replace the import section at the top of src/main.js with this updated import group:

// Load the Three.js engine and its camera controls.
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Apply the full-window canvas styles.
import './style.css';

Why Is OrbitControls Imported Separately?

OrbitControls is an addon included with the Three.js package. Importing it explicitly keeps the core engine focused on rendering.

Scroll to the final render line at the bottom of src/main.js.
Add this controls setup below that final render line:

// Let pointer movement orbit the camera around the stage center.
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();

// Redraw the stage whenever the controls move the camera.
controls.addEventListener('change', () => {
  renderer.render(scene, camera);
});

What Do the Controls Change?

The controls listen for pointer input on the renderer's canvas.
The target keeps the center of the stage as the orbit point.
The change listener redraws the scene from the camera's new position.

Save src/main.js.

Before you drag the stage, do you expect the ground plane to stay fixed on screen or shift with the camera?

Return to the running page in your browser.
Drag across the canvas with your pointer.
Release the pointer after moving around one side of the platform.

The platform should shift in perspective while the camera travels around its center. The stage remains lit throughout the movement.

That foundation is working. Your browser now renders a lit 3D stage that you can inspect from different angles.

Stage Does Not Orbit?

Confirm that the OrbitControls import uses the addon path shown above. A different path can prevent the module from loading.

Check that the controls use renderer.domElement as their input surface. The canvas needs to receive your pointer movement.

Help me fix the orbit interaction.

✔️ Awesome, I've got everything!

Your name-sculpture project now has a lit stage with a draggable camera. Double check that both source files are saved.

ⓧ I'd like to double check the full code

Compare your complete src/style.css file with this version.

/* Make the Three.js canvas fill the browser window. */
html,
body,
#app {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Remove the canvas baseline gap. */
canvas {
  display: block;
}

This stylesheet gives the canvas the full browser window.

Compare your complete src/main.js file with this version.

// Load the Three.js engine and its camera controls.
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Apply the full-window canvas styles.
import './style.css';

// Hold every object that belongs to the 3D world.
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x10131a);

// Frame the stage from above and in front.
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(6, 5, 8);
camera.lookAt(0, 0, 0);

// Draw the scene into a canvas inside the app element.
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.querySelector('#app').appendChild(renderer.domElement);

// Draw the empty scene once so the canvas becomes visible.
renderer.render(scene, camera);

// Build the platform where the sculpture will stand.
const groundGeometry = new THREE.PlaneGeometry(20, 20);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x4f596b, roughness: 0.85 });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

// Shine one directional light across the platform.
const light = new THREE.DirectionalLight(0xffffff, 3);
light.position.set(4, 8, 4);
scene.add(light);

// Redraw the scene with its lit ground plane.
renderer.render(scene, camera);

// Let pointer movement orbit the camera around the stage center.
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();

// Redraw the stage whenever the controls move the camera.
controls.addEventListener('change', () => {
  renderer.render(scene, camera);
});

This script creates the complete scene foundation. It includes the camera controls that redraw the stage after pointer movement.

Your empty stage is ready for its first piece of geometry. Next, you will load a font and turn your own name into standing 3D text.

Extrude Your Name

Your lit Three.js stage already gives the sculpture a place to stand. A plain string still lacks the outlines that can become solid letters.

A compatible font supplies those outlines. TextGeometry extrudes them into a mesh with visible depth.

In this step, get ready to:

Load a Three.js-compatible font for generating letter shapes.
Extrude your chosen name into a 3D mesh.
Position the sculpture upright for an orbit check.

Build the extruded name

Font data loads asynchronously in the browser. The letters must wait for that data before TextGeometry can build their shapes.

Switch back to the JavaScript scene file in your code editor.
Scroll to the bottom of the file.
Choose the sculpture text by entering your name.
Add the font-loading sculpture code by pasting this block after your existing scene setup:

async function addName() {
  // Load the text add-ons when the scene is ready
  const [{ FontLoader }, { TextGeometry }] = await Promise.all([
    import('three/addons/loaders/FontLoader.js'),
    import('three/addons/geometries/TextGeometry.js'),
  ]);

  // Wait for the font outlines before creating geometry
  const font = await new FontLoader().loadAsync('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json');
  const geometry = new TextGeometry('[[SCULPTURE_NAME="your name"]]', {
    font,
    size: 1.2,
    depth: 0.4,
    curveSegments: 12,
  });

  // Center the name while keeping its baseline above the stage
  geometry.computeBoundingBox();
  const width = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
  geometry.translate(-width / 2, 0, 0);

  // Use the existing light to reveal the extrusion
  const material = new THREE.MeshStandardMaterial({ color: 0xf2b84b });
  const sculpture = new THREE.Mesh(geometry, material);
  sculpture.position.set(0, 0.02, 0);
  scene.add(sculpture);
}

addName();

What does this code do?

The dynamic imports load FontLoader plus TextGeometry from the Three.js add-ons.
The loadAsync() call pauses addName() until the font outlines are ready.
The depth value gives each letter thickness along the third axis.
The bounding-box width shifts the complete name around the centre of the stage.
The standard material reacts to the light that already illuminates your ground plane.

Save the JavaScript scene file by pressing Cmd+S (macOS) or Ctrl+S (Windows).

Before you return to the browser, picture where the new mesh should sit on the stage.

Return to the browser tab running the development server.

After the font loads, you will see your chosen name standing upright near the centre of the lit stage. The front faces are gold with visible thickness around their edges.

That is the key transformation complete. Your name now occupies the scene as solid geometry.

Is the stage still empty?

Confirm that your browser can reach the official Three.js font file.
Check that the new block sits after the existing scene variable is created.
Check that both dynamic import paths match the code above.

Ask for help with the exact browser or terminal message: help me debug why my Three.js TextGeometry name is not appearing.

✔️ Awesome, I've got everything!

Great. Your font loads successfully and your chosen name stands on the stage as an extruded mesh.

ⓧ I'd like to double check the full code

Keep all earlier scene code unchanged. Compare the name-building block at the bottom of your JavaScript file with this reference:

async function addName() {
  // Load the text add-ons when the scene is ready
  const [{ FontLoader }, { TextGeometry }] = await Promise.all([
    import('three/addons/loaders/FontLoader.js'),
    import('three/addons/geometries/TextGeometry.js'),
  ]);

  // Wait for the font outlines before creating geometry
  const font = await new FontLoader().loadAsync('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json');
  const geometry = new TextGeometry('[[SCULPTURE_NAME="your name"]]', {
    font,
    size: 1.2,
    depth: 0.4,
    curveSegments: 12,
  });

  // Center the name while keeping its baseline above the stage
  geometry.computeBoundingBox();
  const width = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
  geometry.translate(-width / 2, 0, 0);

  // Use the existing light to reveal the extrusion
  const material = new THREE.MeshStandardMaterial({ color: 0xf2b84b });
  const sculpture = new THREE.Mesh(geometry, material);
  sculpture.position.set(0, 0.02, 0);
  scene.add(sculpture);
}

addName();

Orbit around your name

A front view can hide the extrusion behind the letter faces. An angled view reveals how far the geometry extends into the scene.

Before you drag the camera, which part of each letter do you expect to become visible from the side?

Drag across the browser canvas until you reach a side angle.

You will see solid depth behind the front faces. The name remains upright on the ground while the camera moves around it.

Continue orbiting until you can see the front faces plus one side of the letters.

The lit edges make the extrusion clear from this angle. The ground plane remains beneath the complete name.

Your name now stands as orbitable 3D text. Next, you will replace these smooth letters with stacked blocks so the name grows into a structure.

Build a Block Sculpture

Your name now stands upright on the stage as one continuous extrusion. The next version breaks that surface into repeatable blocks so the letters read like architecture.

A loaded Three.js font can describe each letter as a set of shapes. Point sampling turns those shapes into positions that can guide block placement.

In this step, get ready to:

Convert the loaded font shapes into sampled points.
Replace the original extrusion with blocks placed from those points.
Stack the blocks into a structure that stays readable from different angles.

Sample the letter shapes

Each letter contains contours that describe its outline. Sampling captures positions along those contours without keeping the original solid surface.

How does sampling create a map?

The loaded font turns the chosen name into letter shapes.
Each letter contour provides positions that can be sampled.
Each sampled position becomes the center of a block.

Switch back to the source file from earlier that builds the extruded name.
Locate the section that turns the loaded font into the current name object.
Replace that section with a point-sampling block builder that follows the map above.
Save the source file.

Your running development server refreshes the page after you save. You should see your chosen name traced by separate blocks with the original solid extrusion removed.

That visual shift matters. Your name now has a modular building language.

Seeing an empty stage?

Check that the block builder runs after the loaded font becomes available.
Check that every sampled position creates a visible block.
Check that the completed block structure is added to the existing scene.

Help me debug an empty Three.js scene after replacing extruded text with sampled blocks.

Grow the points into stacks

A single block at each point preserves the letter outline. A stack gives every sampled position enough depth to become part of a structure.

How does stacking add depth?

Each sampled position anchors one stack. Repeated block copies move along the same stacking direction.

The complete set of stacks preserves the letter shapes while giving the sculpture visible layers.

Return to the point-sampling block builder from the previous substep.
Extend the builder so every sampled position creates a stack of offset blocks.
Save the source file.

Your browser refreshes after the save. You should see the separate blocks grow into a layered 3D structure.

Does the sculpture still look flat?

Check that every copy receives a different position along the stacking direction.
Check that each stack contains more than one visible block.
Check that the original extrusion object is no longer added to the scene.

Help me debug a block sculpture that still looks flat.

Verify the sculpture from every angle

Before you orbit the camera, do you expect the name to stay recognizable from both the front and the side?

Return to the browser from earlier.
Drag across the canvas to orbit around the sculpture.
Rotate the camera to a low side angle.
Rotate the camera back toward the front.

From the side, you should see stacked blocks extending from the sampled letter positions. From the front, your chosen name should remain recognizable.

You have completed the main transformation. The loaded font now produces sampled letter-shape points that generate a stacked 3D block sculpture.

✔️ Awesome, I've got everything!

Great. Your saved source now replaces the original text extrusion with a block structure that you can orbit from every angle.

ⓧ I'd like to double check the full code

Your earlier scene code remains in place. The finished source has this cumulative state:

Confirm that the loaded font converts the chosen name into sampled letter-shape points.
Confirm that the sampled points generate a structure of stacked 3D blocks.
Confirm that the original flat text extrusion is absent from the scene.
Confirm that the existing scene foundation remains unchanged.
Confirm that the camera controls still orbit around the visible sculpture.

Your name is now built from stacked geometry that holds up from multiple camera angles. Next, you will make the structure rebuild itself from live text input.

Rebuild the Sculpture Live

Your Three.js scene now turns one name into a structure of stacked blocks. The next goal is to let anyone reshape that structure from the page.

The page still depends on a fixed name in the source. You will make a text input control the complete rebuild.

In this step, get ready to:

Add a browser text input for the current name.
Rebuild the sculpture whenever the input value changes.
Test three different names on the 3D stage.

Add the text input

The input becomes the page's source of truth for the name. Its starting value keeps the visible control consistent with the sculpture already on the stage.

In the source file that currently generates the block sculpture, add a browser text input whose starting value matches the displayed name.
Save the source file.
Return to the browser from earlier.

You should see the text input with the sculpture's current name. The existing block structure should remain visible below it.

Don't see the input?

Confirm that you saved the source file containing the scene. Check that the input is added to the page instead of inside the renderer's canvas.

Ask for help if the control is still missing: help me find why my browser input is missing from my Three.js page

Connect the live rebuild

Each input change needs a clean replacement. Removing the previous blocks first prevents several names from occupying the same space.

What should the rebuild handler do?

The handler reads the current value from the text input.
The handler removes the existing block sculpture from the scene.
The loaded font converts the current value into sampled letter-shape points.
The generation flow builds a replacement sculpture from those points.

Update the text input's value-change handler so it follows the rebuild sequence above.
Save the source file.

Before you type a different name, do you expect the old blocks to stay on the stage or disappear?

Replace the current value in the text input with MIA.

You should see the old structure disappear. A new block sculpture spelling MIA should take its place.

That is the key interaction working. The input now rebuilds a fresh structure without leaving the previous name behind.

Drag across the 3D stage to orbit around the rebuilt MIA sculpture.

You should be able to inspect the new block layout from different angles.

Seeing overlapping names?

Check that the current block sculpture is removed before the new input value is sampled. Confirm that every generated block belongs to the sculpture that gets removed.

Ask for help with the rebuild flow: help me stop old and new sculptures from overlapping

✔️ Awesome, I've got everything!

Your live rebuild is working. The visible text input now controls the geometry on the stage.

ⓧ I'd like to double check the full code

A structure of stacked 3D blocks is generated from the current text input's sampled font-shape points. It has been successfully rebuilt for at least three different names.

A browser text input stores the current name and triggers live regeneration of the sculpture when its value changes.

A Three.js-compatible font is loaded and used to convert the current text input into sampled letter-shape points.

Node.js, npm, Git, a code editor, and a modern browser are available. GitHub and Vercel accounts are signed in.

A browser-rendered scene with a perspective camera, WebGL renderer, OrbitControls, a ground plane, and one light. The stage is visibly lit and can be orbited with pointer controls.

Created locally with the Three.js dependency installed and a Vite development server available.

Test three different names

Different letters produce different sampled point layouts. Testing more names confirms that the input controls the structure instead of changing only its label.

Before you try the next two names, do you expect the same block arrangement to survive both rebuilds?

Replace MIA with ALEX in the text input.

You should see a wider structure whose blocks follow the four new letter shapes.

Drag across the stage to orbit around the ALEX sculpture.

You should be able to view the rebuilt structure from every side.

Replace ALEX with SKY in the text input.

You should see the stage rebuild again with a distinct three-letter block layout.

Drag across the stage to orbit around the SKY sculpture.

You have now rebuilt the sculpture for three different names. Each result remains interactive from every camera angle.

Your sculpture now responds to anyone at the keyboard. Next, you will polish the presentation before putting the sculpture online.

Polish and Deploy the Experience

Your live name input already rebuilds the sculpture in Three.js. The last gap is a deliberate finish for the stage.

This step turns the local experiment into a page you can share. GitHub stores the source while Vercel serves the production site.

In this step, get ready to:

Turn the interactive sculpture into a polished moving experience.
Publish the project source in a GitHub repository.
Launch the production site through Vercel.

Polish the materials and camera

A polished surface needs a material that responds clearly to the scene lighting. MeshStandardMaterial uses roughness and metalness to control that response.

Switch back to the source file that defines your Three.js scene.
Locate the existing material definitions for the generated blocks and ground plane.
Update those definitions so the blocks use MeshStandardMaterial with low roughness plus higher metalness. Give the ground high roughness.
Save the scene source file.
Return to the browser running your local development server.

You should see highlights across the stacked blocks. The ground should remain visually quieter beneath them.

Why do the materials feel different?

Lower roughness creates sharper reflections from the light. Higher metalness gives the blocks a more architectural finish.

The rougher ground diffuses the light across a broader area. That contrast keeps the sculpture at the centre of the scene.

The existing OrbitControls can rotate the camera automatically while preserving pointer controls. Automatic rotation depends on updating the controls inside the animation loop.

Switch back to the scene source file.
Locate the OrbitControls setup and the existing animation loop.
Update them so autoRotate is enabled at a slow autoRotateSpeed. Make sure update() runs once per frame before the renderer draws the scene.
Save the scene source file.

Before you check the browser, do you expect manual dragging to keep working during the automatic orbit?

Return to the browser running your local development server.
Drag the sculpture to move the camera manually.
Type a different name into the text input.

You should see the polished blocks orbit slowly until you drag the camera. The new name should still rebuild as the movement continues.

Scene still looks flat or stationary?

Check that the block material uses MeshStandardMaterial so it responds to the existing light. Make sure the light still points toward the sculpture.

If the camera stays still, confirm that autoRotate is enabled. Confirm that the OrbitControls update() method runs inside the animation loop.

Help me troubleshoot flat materials or a stopped camera orbit.

Publish the source to GitHub

A Git commit records the finished local project as a snapshot. Pushing that snapshot gives Vercel a repository it can build.

Return to the terminal inside the local name-sculpture project.
Initialize the repository and commit the finished source by running these commands:

git init -b main
git add .
git commit -m "Polish 3D name sculpture"

What do these commands do?

The first command initializes version control with main as the branch name.
The second command stages the files in name-sculpture for the snapshot.
The third command records the staged source as a commit with a descriptive message.

Confirm the terminal shows a commit summary with the project files included.

Commit did not complete?

Git may need your author name or email before it can create the commit. Follow the configuration guidance printed in the terminal before running the commit again.

Help me complete my Git commit.

Return to GitHub from earlier.
Select the plus menu in the upper-right corner.
Click New repository.
Select your personal account from the Owner menu.
Enter name-sculpture in the Repository name field.
Choose your preferred repository visibility.
Leave the initialization options unchanged so the repository stays empty.
Click Create repository.

GitHub creates an empty repository and shows its Quick Setup page. This repository is ready to receive your local commit.

Copy the repository URL from the HTTPS section.
Record the copied URL here: https://github.com/your-username/name-sculpture.git.
Connect the local repository to GitHub and push the commit by running:

git remote add origin [[YOUR_REPO_URL="https://github.com/your-username/name-sculpture.git"]]
git push -u origin main

How does the push work?

The first command saves the GitHub repository as the origin remote. The second command uploads the main branch.

Upstream tracking connects your local branch to its GitHub counterpart. Future pushes can use that relationship.

Return to the name-sculpture repository page on GitHub.
Refresh the repository page.

You should see the complete project source and the new commit. Your sculpture now has an online source history that Vercel can deploy.

Push rejected?

Confirm that the repository URL belongs to the empty name-sculpture repository you created. A repository initialized with extra files can cause the local history to conflict with the remote history.

If Git asks you to authenticate, complete the GitHub authentication flow before retrying the push.

Help me fix my GitHub push.

Deploy to Vercel and test on your phone

A Git-connected deployment builds the committed source and serves it from a public URL. New pushes can trigger future deployments automatically.

Return to the Vercel dashboard from earlier.
Select the correct account from the team switcher.
Click the Add New… menu.
Select Project.

Repository access can be the fiddly part here. Vercel may ask you to authorize access before it displays the new GitHub repository.

Authorize access to the name-sculpture repository if Vercel prompts you.
Select the name-sculpture repository from the available Git repositories.
Confirm that the Framework Preset identifies Vite.
Click Deploy.

Vercel builds the project before displaying its production link. A short wait here is normal while the source becomes a live site.

Copy the production URL from the completed deployment page.
Record the production URL here: https://name-sculpture.vercel.app.

Before you load the URL on your phone, do you expect the live rebuilding and camera controls to behave the same way outside your local server?

Open a browser on your phone.
Enter https://name-sculpture.vercel.app in the address bar.
Type your name into the text input.
Drag the sculpture with your finger.

You should see the deployed sculpture rebuild from the new text. The slow orbit should continue after your manual camera movement.

Deployment or mobile interaction not working?

If the deployment fails, inspect the build details in Vercel and compare the failing file with the committed source. Confirm that the complete local project was pushed to GitHub.

If the page loads but touch controls fail, confirm that OrbitControls still receives the renderer canvas as its interaction surface.

Help me troubleshoot my Vercel deployment.

You made it. Your typed name now becomes a polished interactive sculpture that people can open from a production URL.

Secret mission

Capture the Sculpture in Motion

Turn your deployed sculpture into a short visual demo. Record one name rebuilding into stacked geometry, then finish with a slow camera drag that shows the scene is interactive.

Clean Up Your Resources

Your sculpture uses a static deployment with no paid backend. No paid resources were created on the main path.

Choose whether to keep everything available, pause your local work, or delete every copy of the project.

Resources you used:

The local name-sculpture folder contains your Vite project. Its source uses Three.js.
The name-sculpture repository on GitHub.
The production deployment hosted by Vercel at your Vercel URL.
The short screen recording showing a name rebuild into a 3D sculpture.

Keep everything running

No action needed. Choose this if you want to keep sharing the sculpture or continue experimenting with different names.

Keep the local name-sculpture folder for future edits.
Keep the name-sculpture repository as your source-code record.
Leave the Vercel deployment online so your live URL stays available.
Save the screen recording as a quick demonstration of the finished sculpture.

Pause - I'll come back to this later

Pause your local work while keeping every project file available. Your deployed sculpture remains accessible from its live URL.

Check whether a terminal from earlier is still running the local site.
Switch back to that terminal if the local site is still running.
Press Ctrl+C to stop the local development server.
Close your code editor.
Keep the local name-sculpture folder for your next editing session.
Leave the GitHub repository available for future changes.
Leave the Vercel deployment online so the sculpture stays shareable.

Delete - I don't want to use this again

Remove every copy of the project. Deletion is permanent, so save the screen recording somewhere separate if you still want the demo clip.

Permanently delete the name-sculpture repository from its repository settings page on GitHub.
Complete GitHub's on-screen confirmation for name-sculpture.
Delete the name-sculpture project from its project settings page on Vercel.
Complete Vercel's on-screen confirmation.

Your remaining copies are stored on your computer. Use the instructions for your operating system to remove them.

macOS

Press Cmd+Space to open the macOS search bar.
Type Finder and press Enter to open it.
Search for the name-sculpture folder using the Finder search field.
Select the name-sculpture folder.
Press Cmd+Delete to move the folder to the Trash.
Return to the location where you saved the screen recording.
Select the screen recording.
Press Cmd+Delete to move the recording to the Trash.

The local project and recording are now queued for permanent removal.

Review the Trash for any files you still want to keep.
Empty the Trash.
Search for name-sculpture again in Finder.

You should no longer see the project folder in the search results.

Windows

Press the Windows key to open the Windows search bar.
Type File Explorer and press Enter to open it.
Search for the name-sculpture folder using the File Explorer search field.
Select the name-sculpture folder.
Press Shift+Delete to delete the folder permanently.
Complete the deletion confirmation.

The local project folder has now been removed.

Return to the location where you saved the screen recording.
Select the screen recording.
Press Shift+Delete to delete the recording permanently.
Complete the deletion confirmation.
Search for name-sculpture again in File Explorer.

You should no longer see the project folder in the search results.

Return to your GitHub repository list.
Load your Vercel URL in a browser.

You should no longer see the name-sculpture repository in your list. Your Vercel URL should no longer serve the sculpture.

Nice Work!

You did it. Your Three.js page now turns any typed name into a polished 3D sculpture that works on your phone.

You've learned how to:

Build a lit 3D stage with a perspective camera. Add automatic movement while keeping manual camera controls available.
Convert loaded font shapes into sampled points. Generate a stacked block sculpture from those points.
Create a live text-driven rebuild that regenerates the sculpture whenever the input changes. Apply polished materials to complete the visual design.
Publish the name-sculpture project through GitHub and Vercel. Confirm the production deployment on a phone. Capture the rebuild in a short screen recording.
Secret Mission: Use the finished sculpture as the foundation for an optional project extension that pushes your browser-based 3D skills further.

Ready to quiz yourself?