How to Add 3D Models to a Website With AI, No Code Needed

A deep-sea guide called Abyss Atlas has a barreleye fish that turns slowly on the page, and a nautilus that fills the screen as you zoom in. Its maker, Viktor Oddy, posted it on X on 20 October 2026 with the line "Opus 5.5 just built the scariest website I've ever seen." He put the old way at "a 3D artist, a dev, two weeks."

You can build a page like that without writing code, using three tools. ChatGPT draws the object. Meshy turns the drawing into a 3D model. Claude Code puts the models on a web page that visitors can spin and zoom.

This guide walks through every stage: the picture, the 3D file, the build, the preview that most people get wrong, and going live. It also covers what each tool costs, the licence catch on Meshy's free models, and how to fix a model that will not show.

What a 3D website is made of

A page like Abyss Atlas has three parts, and each tool in this method handles one of them.

The first is the 3D model itself. The file format to know is GLB. It is the single-file version of glTF, which the Khronos Group describes as "a royalty-free specification for the efficient transmission and loading of 3D scenes and models." One GLB file holds the whole model, so you can drop it into a folder like a photo. The Three.js manual recommends glTF wherever possible because it is compact to send and fast to load.

The second is the code that draws the model in a browser. The prompt below asks for a free library called Three.js. Its project page on GitHub, run under the name mrdoob, says the aim is "an easy-to-use, lightweight, cross-browser, general-purpose 3D library." It is MIT licensed and has about 117,000 stars. You never touch it yourself. Claude Code writes the Three.js code for you.

The third is the page around the models: the layout, the text, the colors. That is where Claude Code does most of its work, and where pointing it at a site you like makes a big difference.

For a business, the obvious uses are a product people can turn around before they buy, a mascot on a landing page, or a menu item that rotates on hover. The method is the same whatever the object is.

Before you start

• A ChatGPT account at chatgpt.com. The free plan can make images.
• A Meshy account at meshy.ai. The free plan is enough for a first page.
• A paid Claude plan and the Claude desktop app from claude.com/download, for Windows, macOS or Linux (Linux is in beta). Claude Code is included in every paid plan. Codex, which comes with ChatGPT plans from Free upward with limits, can do this stage instead.
• The link to a website whose layout you like. It does not need to be 3D. You are borrowing its structure and colors, not its content.
• About an hour for a first page with three or four models. Most of that is waiting on Meshy and Claude, and checking their work.

Stage 1: Make a clean picture of your object in ChatGPT

Meshy builds the 3D model from one picture, so the picture decides the result. A busy background or a cut-off edge turns into a broken model.

1. Open ChatGPT and start a new chat.
2. Ask for one object on a plain white background. The short version is "make an image of a jellyfish on a plain white background," with your object in place of the jellyfish. The longer prompt below follows Meshy's own advice on input images and usually gives a cleaner model.
3. Look at the result before you download it. The whole object should be in frame, with nothing touching the edges and nothing behind it. If it fails any of that, ask for another one. It costs you nothing at this stage and saves a Meshy credit later.
4. Download the image. Meshy accepts PNG, JPG, JPEG and WEBP files up to 20 MB.
5. Repeat for every object you want on the page. Ask for the same style each time, so the models match each other.

CopyMake an image of a [your object], on its own, centred, with the whole object in frame.
Plain white background, soft even lighting, no shadows, no text, no other objects.
Show it from a slight three-quarter angle, like a product photo taken with a long lens.

Why these details matter: Meshy's guide asks for a clear single subject on a simple background, at least 512 by 512 pixels, evenly lit, and shot from a near-flat angle to reduce distortion. Every line of that prompt maps to one of those tips. You can also use a real product photo instead of a ChatGPT image, as long as it meets the same rules.

Stage 2: Turn the picture into a 3D model in Meshy

1. Sign in to Meshy. In the left sidebar, click Model, then the Image to 3D tab.
2. Choose High Detail. The other option, Smart Topology, makes meshes meant for games.
3. Pick the model. On the free plan, choose Meshy 6 Lite, because that is the one the free plan lets you download. The panel shows the time and the credit cost before you start. For Meshy 6 Lite it is about a minute and 10 credits.
4. Upload your image. Leave Image Enhancement on if your model offers it. Meshy redraws the image to fix uneven light and busy backgrounds, though small details can change.
5. Click Generate and wait. When it finishes, drag the model in the viewer to look at it from every side, including the back, which Meshy had to invent.
6. Check the color. Meshy's docs say the option to add texture during generation is not available with Meshy 6 Lite. If your model looks plain or the colors are off, use the Texture button on the finished model. That AI Texturing step costs 10 credits.
7. Click Download and pick GLB. Downloads do not use credits.
8. Repeat for every object.

Budget the free plan before you start. 100 credits covers ten Meshy 6 Lite models, or about five if you spend 10 more credits texturing each one. The free plan also runs one job at a time, at low queue priority, with no free retries. A bad picture costs you a model, which is why Stage 1 matters.

Stage 3: Collect the files and pick a layout

1. Make a new folder for the project, for example my-3d-site.
2. Put every .glb file in it. Give each one a plain name, like jellyfish.glb or red-sneaker.glb. Plain names help Claude label each section correctly, while a name like model_final_v3.glb tells it nothing.
3. Copy the link of the website whose layout you like. Pick a page with clear sections, because the prompt asks for one model per section. A long scrolling product page works better than a busy home page.
4. If you want real text on the page, such as product names, prices or facts, write it in a plain text file in the same folder. Otherwise Claude writes short placeholder facts that you will need to check.

Stage 4: Build the page with Claude Code

1. Open the Claude desktop app, sign in, and click the Code tab.
2. In the row under the prompt box, set the environment to Local, then click the project folder control and choose your my-3d-site folder.
3. Set the permission mode. Manual asks before every file change or command, which is the safe choice for a first run. Accept edits lets Claude write files without asking but still checks before other commands.
4. Paste the prompt below. Replace [your link] with the link you copied, then press Enter.
5. Let it work. Claude reads the folder, writes the page files and tells you when it is done. If it asks to fetch the reference site or run a command, read what it wants before you approve it.

CopyBuild a website that shows the 3D models (.glb files) in this folder with Three.js. One model per section. Let me drag to spin and scroll to zoom. Add a short fact card next to each. Copy the layout and colours of [your link]. Make it work on phones.

Prefer a one-click copy? The same prompt is on our free prompt page.

Each sentence in that prompt has a job. "One model per section" stops Claude from piling every model into one scene. "Drag to spin and scroll to zoom" names the exact controls, so you do not get an auto-rotating model that visitors cannot touch. "Make it work on phones" makes Claude handle touch input and smaller screens from the start, which is harder to add later.

Stage 5: Preview it the right way

This is the step that trips people up. If you double-click the index.html file Claude made, Chrome opens it straight from your disk, and the 3D files do not load, because the browser blocks local file requests. The page appears with empty spaces where the models should be. The Three.js manual says the same thing: a double-clicked page can open, but important features do not work that way, for security reasons.

1. Type: start a local preview. Claude Code runs a small web server on your computer and gives you a link that starts with http://localhost.
2. Open that link. In the desktop app you can also open the built-in Browser pane with Ctrl+Shift+B on Windows or Cmd+Shift+B on a Mac, or click Open on the server's card in the chat.
3. Drag each model to spin it and scroll to zoom. Then make the window narrow to see the phone layout.
4. Leave the preview running while you ask for changes. Refresh the page to see each one.

Stage 6: Change what you want

Describe changes the way you would to a designer. Be specific about which section and what you see.

CopyThe jellyfish is too small and sits too low. Make it fill most of its section and centre it.
Make the background darker and the fact cards easier to read on a phone.
Add a footer line: "3D models made with Meshy, licensed CC BY 4.0", linked to the licence.
Make the page load faster on a slow phone connection.

One change per message is easier to check than five at once. If a change breaks something, say so plainly ("the sneaker stopped showing after the last change") and Claude can look at its own last edit.

The licence catch on free Meshy models

Meshy's pricing page lists free-plan assets under CC BY 4.0 and paid-plan assets as private and customer owned. CC BY 4.0 lets you use the model "for any purpose, even commercially," on one condition: you give appropriate credit. The licence deed spells that out as the creator's name, a link to the licence and a note if you changed the work.

On a website that can be one line in the footer, like the one in the change prompt above. If you would rather not credit anyone, the paid plans give you private ownership.

What it costs

Meshy's pricing page shows paid plans in your local currency, so check it from where you are. Its credits guide says downloads never use credits and free credits reset on the first of each month.

Troubleshooting

• The models are blank. You opened the file directly. Go back to Stage 5 and use the local preview link.
• One model is missing or the space is empty even in the preview. The Three.js manual lists the usual causes: the model is far too big or too small, so the camera sits inside it or cannot see it, or there is no light, so it is hidden in the dark. Tell Claude "the jellyfish does not show, check its scale, the camera and the lighting."
• You are not sure if the file itself is broken. Drag the GLB onto a free glTF viewer. If it looks wrong there too, the problem is the Meshy model, so generate it again from a cleaner picture.
• The page is slow on a phone. Several high-detail models add up. Ask Claude to compress the models with glTF Transform, a free tool by Don McCurdy whose optimize command shrinks GLB files and their textures, and to load each model only when its section scrolls into view.
• The colors look flat. Add light. Ask Claude for a soft key light and an environment map, or retexture the model in Meshy.
• The layout looks nothing like your reference. Some sites block automated visits. Describe the layout in words instead: "dark background, big headline on the left, model on the right, one section per screen."

Ways to change the method

• Skip ChatGPT. Meshy also has Text to 3D, where you describe the model instead of uploading a picture. Image to 3D gives you more control over the look, because you can approve the picture before spending credits.
• Use Codex instead of Claude Code. The prompt does not depend on either one. Codex is included in ChatGPT plans from Free upward, with limits.
• Show one product, not a whole page. For a single product on an existing site, ask Claude to use model-viewer, Google's free tool for showing interactive 3D models on the web and in AR. It is simpler to drop into a page you already have than a full Three.js scene.
• Skip the models entirely. Viktor's post says Opus 5.5 built his site from one prompt. Claude can also draw simple shapes and scenes in Three.js code with no model files at all. For a realistic creature or product, a real model file looks better.
• Use other export formats. Meshy also exports FBX, OBJ and USDZ for other tools, and STL and 3MF for 3D printing. For a website, GLB is the one you want.

Putting it on the web

The local preview only lives on your computer. To share it, the folder has to go to a host. The quickest route for a test is Netlify Drop.

1. Ask Claude: "get this folder ready to upload as a static site, with paths that work on any host." It checks that the models load from relative paths. Absolute file paths are one of the causes the Three.js manual lists for models that load on one computer and fail everywhere else.
2. Open Netlify Drop and drag the folder onto the drop zone. The site goes live at a link ending in netlify.app.
3. Without an account, Netlify protects that link with a temporary password until you claim it by signing up. Sign in first if you want to keep it.
4. Mind the size. Netlify says deploys under 50 MB work best and files over 10 MB may get stuck, so compress large models first.
5. Open the live link on your own phone, on mobile data, before you send it to anyone.

Two checks before it goes on your real website. Add the Meshy credit if you used the free plan. And test one model next to the real product before you plan a page around 3D: a model made from one picture can be close, but not exact, and a product page needs exact.

If you want help with the design side, that is what our creative production team does.

Frequently asked questions

Can I add a 3D model to my website without coding?

Yes. Turn an image into a GLB file with an image-to-3D tool such as Meshy, put the files in a folder and ask Claude Code or Codex to build a page that shows them with Three.js. You describe what you want in plain English and the AI writes the code.

Is Meshy free?

Meshy has a free plan with 100 credits a month and up to 10 downloads of Meshy 6 Lite models. Free models are licensed CC BY 4.0, so you can use them commercially as long as you credit Meshy. Paid plans make the models private and customer owned.

What file format do I need for 3D on a website?

GLB is the usual choice for the web. It is the single-file version of glTF, a royalty-free format from the Khronos Group made for loading 3D models efficiently. Meshy exports GLB along with FBX, OBJ, USDZ, STL and 3MF.

Why are my 3D models not showing on the page?

If you opened the HTML file by double-clicking it, Chrome blocks the page from loading local files, so the models stay blank. Ask Claude Code to start a local preview and open the link it gives you. If one model is still missing, it is often too big or too small for the camera, or there is no light on it.

Do I need Claude Code, or can I use Codex?

Either works, because the prompt does not depend on one tool. Claude Code needs a paid Claude plan, from $17 a month on yearly billing, and Codex is included in ChatGPT plans from Free upward with usage limits.

Do I have to credit Meshy on my website?

On the free plan, yes. Free models are CC BY 4.0, which asks for appropriate credit and a link to the licence. A footer line such as "3D models made with Meshy, licensed CC BY 4.0" covers it. Paid plans do not need the credit.

Sources

• Viktor Oddy on X: the Abyss Atlas post (20 October 2026)
• Meshy, Meshy pricing and Meshy credits guide
• Meshy docs: Image to 3D and Pricing and credits
• Three.js on GitHub and the Three.js manual (installation, loading 3D models)
• Khronos Group: glTF
• Creative Commons: CC BY 4.0
• Claude Code in the desktop app and Claude pricing
• Netlify: Get started with Drop
• Engadget: what is free in ChatGPT in 2026