Add an AI-Generated 3D Prop

Generate a 3D prop with AI and add it to a web page.

Introduction

30 Second Summary

A striking web page can still feel flat when every element stays pinned to the screen. Adding a custom 3D object usually means finding a suitable model or learning a modelling tool.

In this project, you will use Hyper3D Rodin through MCP to generate a prop from a text description. Your coding agent turns that model into a rotating browser scene stored in your own repo.

What You'll Build

You'll open your page to see a custom 3D prop turning under its own light from a model stored in your repo.

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

A generated 3D prop that matches your page's visual style in the Rodin preview.
A downloaded model file stored in your repo for your page to load directly.
A lit browser scene where your prop rotates slowly on the page.
Secret Mission: An optional challenge to push your skills further.

Are there any prerequisites?

You'll need a coding agent that accepts MCP servers. You'll also need a browser plus an existing web page for the generated prop.

Before We Start

A generated 3D prop needs a real page where you can see it. A local web repository gives that prop a stable home.

Your browser provides the visual checkpoint. An MCP-compatible coding agent keeps the page within reach of the generation workflow.

In this step, get ready to:

Confirm a browser is available for local previews.
Install an MCP-compatible coding agent.
Open a local repository containing a starter index.html page.

Prepare your local tools

The agent must support MCP servers because later steps send 3D generation requests through MCP. The browser gives you a separate view of the page the agent edits.

Use your operating system's app search to launch an installed browser.

You should see a browser window with a new tab or home page. Your visual checkpoint is ready.

Choose a coding agent whose official documentation confirms MCP server support.
Open the provider's official installation guide for your operating system.

Installation can trigger an operating-system permission prompt. That permission allows the app to be added to your machine.

Follow the provider's guide to install the coding agent.
Approve the operating-system permission prompt if one appears.

When installation finishes, the coding agent should appear in your installed apps.

Use your operating system's app search to launch the coding agent.

That first checkpoint is complete. You should see the agent's welcome screen or a new-session view.

Agent missing or failing to open?

Return to the official installation guide to confirm the installer matches your operating system.
Restart the installer after approving any blocked permission request.

Ask for help with your setup: help me install and open an MCP-compatible coding agent.

Create the starter repository

A repository keeps the page plus its future model inside one local boundary. The agent can edit that folder without reaching into unrelated files.

File creation may trigger an agent permission request. The request should only cover the new project folder on your Desktop.

Start a new session in your coding agent.
Ask the agent to create a new local web repository on your Desktop. Name the folder your web project folder. Include a starter index.html page.

You should see proposed folder operations plus a proposed index.html file before the agent applies its changes.

Confirm the proposed location ends with your web project folder.
Approve the agent's file operations.

You should see the new project folder in the agent's file tree. The file tree should contain index.html.

Select index.html in the agent's file tree.

You should see index.html open in an editor tab. Its starter page is ready for later updates.

Open the agent's source-control view.

You should see repository controls for the project folder. This confirms the folder is a local repository.

Preview the starter page

A preview proves the browser can render the same page your agent is editing. This baseline makes every later 3D change visible.

Before you start the preview, do you expect the browser to load the starter page from your local repository?

Use your agent's local preview method to render index.html.

Your browser should show the starter page from index.html. The page loads from your local repository.

✔️ Awesome, I've got everything!

You have the baseline in place. The browser can render the page your agent is ready to update.

ⓧ I'd like to double check the full code

Your setup should match this checkpoint exactly:

A local repository is open with a starter index.html page ready to be updated.

Starter page not loading?

Confirm the preview targets index.html.
Confirm index.html sits inside the project folder shown in the agent.
Restart the preview after granting permission to open the browser.

Ask for help with the preview: help me preview my starter index.html page from my coding agent.

Your local starting point is ready. Next, you'll connect the 3D service that generates your prop.

Set Up Your Hyper3D Account

Your coding agent needs permission to ask Hyper3D Rodin for a model. An API key provides that permission without using your account password.

This step establishes access before any generation spends credits. You will record the starting balance so the later cost comparison has a clean baseline.

In this step, get ready to:

Access the Hyper3D API dashboard through your account.
Create an API key for the later MCP connection.
Record your starting Rodin credit balance.

Access your Hyper3D account

Your Hyper3D account holds the credentials for Rodin. The API dashboard also shows the credits available for generation.

Switch back to the browser from earlier.
Open the Hyper3D website in the browser.

Your next actions depend on whether you already have a Hyper3D account.

✔️ I already have an account

Select the account access option in the page header.
Enter the credentials for your existing account.
Complete any identity check shown by Hyper3D.
Open the API dashboard from your account settings.

ⓧ I need an account

Select the account creation option in the page header.
Choose one supported sign-up method.
Complete the requested account details.
Finish any identity check shown by Hyper3D.
Open the API dashboard from your account settings.

You should see the API dashboard area for account credentials. This confirms that your account is ready for API access.

Can't Reach the API Dashboard?

Confirm that you signed in to the intended Hyper3D account.
Complete any pending account verification shown by Hyper3D.
Follow the account access process displayed by Hyper3D if the dashboard remains unavailable.

Help me access the Hyper3D API dashboard without sharing my credentials. For account-specific guidance, use Hyper3D's official documentation.

Create and protect your API key

The MCP server uses this credential to act on your Hyper3D account. The full value is sensitive.

Keep Your Key Private

Credential screens can feel risky because the secret may appear only once. Copy the key into secure storage before closing the reveal.

Keep the key outside your local repository. Never include the full value in a screenshot.

Use the key-creation control in the API dashboard to create an API key.
Copy the new API key when the dashboard reveals it.
Store the copied key in your password manager or operating system's credential manager.
Close the view that displays the full key.

The full secret should no longer be visible. Your copied key is ready for the MCP setup.

Can't Create an API Key?

Confirm that you are still signed in to the intended Hyper3D account.
Complete any API access process displayed in the dashboard.
Refresh the API dashboard after your account access is confirmed.

Help me create a Hyper3D API key without exposing my credentials.

Record your starting credit balance

Rodin generation consumes credits from your account. Recording the balance now gives the later cost check a clear starting point.

Find your account's remaining credit balance in the API dashboard.
Record the displayed number here: your starting Rodin credit balance.

Before the final check, which two pieces of account state do you expect to confirm on the dashboard?

Locate the key management area in the API dashboard.
Confirm that it shows an available API key without exposing the full secret.
Locate the credit area in the API dashboard.
Confirm that the displayed balance matches your starting Rodin credit balance.

You should see an available API key with the full value hidden. You should also see the credit balance you recorded.

That is the account groundwork complete. Rodin can now connect to your coding agent without exposing your credential.

Your Hyper3D account is ready. Next up, you will connect Rodin to your coding agent and confirm that its generation tool is available.

Connect the Rodin MCP Server

Your Hyper3D Rodin account is ready. Now your coding agent needs a route to Rodin.

The Model Context Protocol (MCP) server gives the agent access to Rodin's generation capability. Your API key authorizes that connection.

MCP setup can fail quietly when its configuration lands in the wrong place. A tool-list check proves this session can reach Rodin before you generate a prop.

In this step, get ready to:

Add the Hyper3D Rodin MCP server with the dashboard's setup prompt.
List the agent's tools to confirm the Rodin generation tool is available.

Add the server with Hyper3D's setup prompt

Hyper3D's setup prompt carries the server configuration into your coding agent. It uses the API key you copied earlier to authorize the connection.

Your coding agent may request permission to update its MCP configuration. Approving that request allows the agent to add the server.

Keep Your Key Private

The next action uses a live credential inside your coding agent. Your key stays private when the setup prompt remains in that private session.

Keep the setup prompt inside your coding agent.
Exclude the API key from screenshots or shared messages.

Switch back to the Hyper3D API dashboard from earlier.
Locate Hyper3D's setup prompt for the Rodin MCP server.
Copy the entire setup prompt.
Return to the coding agent window that holds your local repository.
Paste the setup prompt into the agent chat.
Use your copied Hyper3D API key if the setup prompt requests authentication.
Send the setup prompt to the agent.
Approve the request if your agent asks to update its MCP configuration.

You should see the agent confirm that the Rodin MCP server is configured or connected.

Good progress. Your coding agent now has the server configuration it needs for Rodin.

Server Not Connecting?

Return to the Hyper3D API dashboard from earlier.
Copy the entire setup prompt again.
Paste the fresh copy into the same coding agent session that holds your open repository.

Help me diagnose why my coding agent cannot connect to the Hyper3D Rodin MCP server.

Confirm the Rodin generation tool

The current agent session exposes tools from connected MCP servers. Listing those tools gives you a visible connection check.

Before you ask, do you expect Rodin to appear in the available tool list?

Ask your coding agent to list every tool available in the current session.

You should see the Rodin generation tool in the list. This confirms that the current agent session can reach the server.

That is the hard part done. Your agent can now access Rodin from the project.

Rodin Missing From the Tool List?

If Rodin is absent, the current agent session has not exposed the server connection.

Return to the agent conversation that received Hyper3D's setup prompt.
Review the setup response for a failed connection message.
Paste a fresh copy of the setup prompt into the current session.
Ask the agent to list its available tools again.

Help me find out why Rodin is missing from my coding agent's tool list.

Your coding agent can now see Rodin's generation tool. Next up, you'll describe a prop that matches your web page.

Generate Your First 3D Prop

Your coding agent can now reach Hyper3D Rodin through MCP. The generation tool is connected and ready to create a 3D asset from a written description.

The next challenge is choosing a prop that belongs on your page. You'll give Rodin a lantern description for a dark landing page. Then you'll inspect the completed model in the Rodin workspace.

In this step, get ready to:

Describe a lantern that fits a dark landing page.
Generate the prop through the connected Rodin tool.
Open the completed preview in the Rodin workspace.

Match the prop to the page

A clear prompt gives Rodin the object to make. Page context helps the generated prop suit its destination.

This submission uses Rodin credits. You already recorded your starting balance, so this generation stays measurable.

Switch back to the coding agent from earlier.
Start the lantern generation by sending this prompt to the coding agent:

Use the Rodin generation tool to generate a single 3D lantern prop for a dark landing page.

How does this prompt guide Rodin?

The Rodin generation tool phrase directs the coding agent to use the connected service.
The single 3D lantern prop phrase keeps the request focused on one object.
The dark landing page phrase supplies the visual context for the asset.

Review any generation details the agent presents before submission.
Confirm the request if your agent asks for approval.
Check the agent conversation for confirmation that a Rodin task was submitted.

You'll see the agent call the connected Rodin tool and report that the generation request has started.

Generation did not start?

Ask the agent to list its available tools again.
Confirm that the Rodin generation tool still appears in the tool list.

If the tool is missing or the request still does not start, help me troubleshoot my connected Rodin generation tool.

Wait for a completed asset

Rodin handles generation asynchronously. Your coding agent can check the task while the service builds the lantern.

Ask the coding agent to check the current generation task by sending this prompt:

Check the Rodin task status. Tell me when the lantern generation is complete and return the result link.

What does this request check?

The Rodin task status shows whether the submitted generation is still processing or complete.
The result link gives you access to the finished asset after generation completes.

The agent may report that the task is still processing. That response is expected while Rodin builds the asset.

Wait briefly before checking again.
Send the same status prompt again after the wait.

When generation finishes, the agent reports that the task is complete and returns the result link. Your written description now exists as a 3D asset.

Task still has no result?

Confirm that the agent is checking the same task created by your lantern prompt.
Ask the agent to retry the status check without submitting a second generation.

If the task cannot be found or reports a failure, help me diagnose my Rodin generation task.

Inspect the finished lantern

The browser preview lets you confirm that Rodin created the requested object. It also keeps the finished asset visible before you download it in the next step.

Before you open the result, what details do you expect a lantern made for a dark landing page to have?

Open the result link returned by the coding agent in your browser.
Confirm that the completed preview shows one 3D lantern suited to a dark landing page.
Keep the completed lantern preview visible in the Rodin workspace.

You should see a completed 3D lantern in the Rodin workspace preview. This visual result confirms that the connected generation tool created your first prop.

Lantern preview not visible?

Return to the coding agent from earlier.
Ask the agent to check whether the lantern task is complete.
Open the latest result link after the agent confirms completion.

If the completed result still does not appear, help me open my completed Rodin lantern preview.

Your first Rodin asset is complete. Next, you'll download the finished lantern into your repository so the page can use its own local model file.

Download the Generated Model

Your first lantern is complete in the Hyper3D Rodin workspace. Its preview proves the generation succeeded.

The preview still lives outside your repository. This step gives your web project a local copy that stays available without the generation service.

In this step, get ready to:

Download the completed first lantern into the open repository.
Confirm the model appears in the file tree with its file size.

Download the completed lantern

A local model file gives index.html a stable asset path for the next step. The repository becomes the source of the page's lantern.

Your coding agent may request permission to write inside the repository. This permission lets the agent save the downloaded model in your project.

Switch back to the coding agent chat that generated the first lantern.
Ask the agent to download the completed first lantern to assets/lantern-v1.glb.

You'll see the agent start the download. It may pause for repository write permission.

Allow the repository write if your coding agent requests permission.

You'll see the agent confirm that the model was saved to assets/lantern-v1.glb.

Ask the agent to report the saved model's file size.

The reported size should be greater than zero. That result confirms the downloaded file contains model data.

Why keep the model locally?

The generated preview belongs to the Rodin workspace. The downloaded copy belongs to your web project.

A fixed local path lets the page load the lantern without contacting the generation service. Your repository now controls the asset it displays.

Download did not finish?

Confirm that the request refers to the completed first lantern shown in the Rodin workspace.
Confirm that the open repository is the download destination.
Approve the repository write request if the agent is waiting for permission.

Ask for help with the model download.

Confirm the local file and its size

The file tree shows whether the download reached your repository. The displayed file size confirms whether the saved model contains data.

Before you inspect the repository, where do you expect the downloaded lantern to appear?

Return to the coding agent's file tree.
Expand the assets folder.
Locate lantern-v1.glb inside the folder.
Use the coding agent's file tree to display the model's file size.

You'll see assets/lantern-v1.glb inside the repository. Its displayed size is greater than zero.

That is the handoff done. Your generated lantern now lives inside the repository as a project asset.

Can't see the downloaded model?

Refresh the coding agent's file tree if the repository view has not updated.
Confirm that the agent saved the model inside the open repository.
Ask the agent to download the completed lantern again if the displayed file size is zero.

Help me find or download the missing lantern model.

Your lantern is local and ready to load. Next, you'll place it on the page with a light plus a slow rotation.

Place and Animate the Prop

Your first lantern from Hyper3D Rodin is now stored in your repository as assets/lantern-v1.glb. A generated model becomes part of the page once the browser has a 3D scene to render it.

In this step, you will have the coding agent update index.html to place the lantern. The finished page shows an illuminated lantern turning slowly in the browser.

In this step, get ready to:

Guide the coding agent to load the local lantern into index.html.
Check the complete scene change before accepting it.
Preview the page to verify the illuminated lantern rotates.

Brief the agent on the 3D scene

The GLB file format packages a 3D model into one asset that a web page can load. Your coding agent can choose a rendering approach that fits the starter page.

What should the request include?

The model source points to assets/lantern-v1.glb.
The lantern has a visible position within the scene.
A light illuminates the lantern.
The lantern rotates slowly throughout the preview.
The complete page change stays inside index.html.

Switch back to the coding agent from earlier.
Create one request that includes every requirement above.
Send the request to the agent.

You should see the agent propose a change to index.html.

Review the complete page change

A page can render successfully while its model stays hidden. A quick audit catches missing scene details before you open the preview.

Inspect the agent's proposed edit to index.html.
Confirm the model source uses assets/lantern-v1.glb.
Confirm the scene places the lantern within view.
Confirm the scene includes a light.
Confirm the animation loop updates the lantern's rotation.
Ask the agent to fix any missing requirement.
Accept the completed edit.
Save index.html.

Your local page now contains the complete scene needed to render the lantern.

Preview the rotating lantern

The browser is where the entire scene proves itself. A successful preview shows the local lantern as a visible moving object.

Why might the agent request permission?

The coding agent may ask permission to run a local preview process. That process lets the browser load the model from your repository.

Before you preview the page, do you think the lantern will appear immediately?

Ask the coding agent to start a local preview of index.html in your browser.
Approve the preview process if the agent requests permission.
Watch the lantern for several seconds.

You should see the lantern illuminated on the page. Its orientation should change continuously through a slow rotation.

You made the generated asset feel like part of the page. The local lantern is now lit and moving in your browser.

✔️ Awesome, I've got everything!

Your index.html page is saved. The browser preview shows the illuminated lantern rotating slowly.

ⓧ I'd like to double check the full code

Use the coding agent to audit the complete index.html file against the required result.

Return to index.html in the coding agent.
Ask the agent to inspect the complete file for the exact model path assets/lantern-v1.glb.
Ask the agent to confirm the lantern has a visible placement.
Ask the agent to confirm the scene includes a light.
Ask the agent to confirm the lantern has a slow continuous rotation.
Ask the agent to correct any missing requirement.

Lantern missing or stationary?

If the page is blank, ask the agent to inspect the browser console for model-loading failures.
If the model is missing, ask the agent to recheck assets/lantern-v1.glb.
If the lantern is dark, ask the agent to adjust the scene light.
If the lantern is stationary, ask the agent to verify that the animation loop changes its rotation.

help me diagnose why the lantern in my index.html page is missing, dark, or stationary.

Your first lantern is now live on the page. Next, you will compare it with another generated version.

Compare Two Prop Versions

Your first Hyper3D Rodin lantern is already illuminated in the browser. Its slow rotation proves that the generated model works on your page.

A single generation cannot show how strongly the description shapes the result. This step creates a second lantern so you can compare the visual change against the credits spent.

In this step, get ready to:

Generate a changed lantern version.
Render both lanterns side by side.
Measure the credits spent across both generations.

Why change one detail?

Changing one visual detail gives you a controlled comparison. You can connect the difference in the description to the difference in the finished model.

Regenerate and download the lantern

The second lantern needs a clear visual difference while keeping the same role on your dark landing page. One focused change makes the two results easier to compare.

Switch back to the coding agent chat from earlier.
Choose one clear visual detail to change in the original lantern description.
Ask the agent to regenerate the lantern with your changed description using the available Rodin generation tool.

This is the slowest part of the step, so a quiet wait does not mean your request failed.

Wait for the second generation to finish in the Rodin workspace.
Compare the second preview with the first lantern to confirm your requested change is visible.

You should see a completed second lantern in the Rodin workspace. Its changed detail should be visible in the preview.

Ask the agent to download the completed second model to assets/lantern-v2.glb.
Expand the assets folder in the coding agent's file tree.

You should see lantern-v1.glb plus lantern-v2.glb inside the folder. Good work. Your changed description now has a finished local model behind it.

Second model missing?

Confirm that the Rodin generation tool remains available in the coding agent.
Ask the agent to verify that the completed model was saved at assets/lantern-v2.glb.
Refresh the coding agent's file tree if the download completed without appearing.

Help me diagnose why my second Rodin model is missing from the project.

Compare the models side by side

A fair visual comparison gives both models the same presentation. Matching their lighting plus movement keeps attention on the change produced by your description.

Ask the agent to update index.html with a side-by-side comparison using assets/lantern-v1.glb plus assets/lantern-v2.glb under matched illumination with slow rotation.

Before you check the page, which difference between the two lanterns do you expect to notice first?

Switch back to the browser preview from earlier.
Refresh the comparison page.

You should see two illuminated lanterns side by side. Each lantern should rotate slowly.

One lantern invisible?

Confirm that index.html uses the exact paths assets/lantern-v1.glb plus assets/lantern-v2.glb.
Ask the agent to compare the scale of the two models if one appears too small.
Ask the agent to check the placement plus lighting if one model loads without becoming visible.

Help me fix a side-by-side 3D comparison where one lantern is missing or dark.

Measure the credit cost

The Hyper3D API dashboard turns both generation runs into a measurable credit cost. The difference between your recorded starting balance and the current balance is the total credits spent.

Before checking the dashboard, do you expect the current balance to match the starting balance or be lower?

Switch back to the Hyper3D API dashboard from earlier.
Read the current Rodin credit balance.
Subtract the current balance from the starting balance you recorded.

The result is the number of Rodin credits spent across the two generation runs. You now have a concrete cost for producing both lantern versions.

Comparison complete. Your page shows both local lanterns while your credit calculation captures the cost of generating them.

Secret mission

Run a Production Asset Review

Your two lanterns are ready. This mission turns their side-by-side preview into a production decision backed by visual quality, file weight, and generation cost.

Clean Up Your Resources

Your local comparison page has no ongoing hosting cost. Choose whether to keep the Hyper3D Rodin setup, pause its MCP access, or delete the project artifacts.

Resources you used:

Local comparison page in index.html.
Generated model files at assets/lantern-v1.glb and assets/lantern-v2.glb.
Rodin MCP server connection in your coding agent.
Hyper3D API key used by the Rodin MCP server.

Keep everything running

No action needed. Choose this if you want to keep comparing the lanterns or generate another version.

Your comparison page remains available from the open repository.
Both lantern models remain stored in the assets folder.
The Rodin MCP server remains connected to your coding agent.
Your API key remains available to the existing MCP configuration.

Pause - I'll come back to this later

Pausing disconnects the coding agent from Rodin while preserving your local comparison page. Your API key remains active in your Hyper3D account.

Switch back to the coding agent from earlier.
Disable the existing Rodin MCP server connection in the coding agent's MCP settings.
Leave index.html in the open repository.
Leave assets/lantern-v1.glb in the open repository.
Leave assets/lantern-v2.glb in the open repository.
Reconnect the same server in the coding agent's MCP settings when you want to generate another model.
Use the delete option if this is a shared machine.

Delete - I don't want to use this again

Deleting these files is final, so the first action gives you a chance to keep a copy. Revoking the API key prevents the existing MCP setup from accessing your Hyper3D account.

Copy index.html, assets/lantern-v1.glb, and assets/lantern-v2.glb outside the open repository if you want to keep them.
Remove the Rodin MCP server connection from the coding agent's MCP settings.
Revoke the API key used for MCP configuration in the Hyper3D API dashboard from earlier.
Delete index.html from the open repository with the coding agent's file tree.
Delete assets/lantern-v1.glb from the open repository with the coding agent's file tree.
Delete assets/lantern-v2.glb from the open repository with the coding agent's file tree.
Delete the assets folder if it is empty.
Check the open repository in the coding agent's file tree.

You should no longer see index.html, assets/lantern-v1.glb, or assets/lantern-v2.glb in the repository. The revoked API key can no longer authenticate a Rodin MCP connection.

Nice Work!

You did it! Your browser now displays two illuminated, slowly rotating lanterns generated from your own descriptions.

You've learned how to:

Connect Hyper3D Rodin to your coding agent through MCP. You confirmed that the generation tool was available before creating a model.
Generate two custom lanterns from different descriptions. You downloaded the completed models to assets/lantern-v1.glb and assets/lantern-v2.glb so your page can load local copies.
Render a side-by-side comparison in index.html. You illuminated both lanterns. You gave each model a slow rotation. You also measured the credits spent across both generations.
Secret Mission: Complete an optional challenge to push your skills further.

Ready to quiz yourself?