Skip to content

Henry Lõiv

Web design & development

3D & WebGL 7 min read

How much does a custom 3D website cost?

Plan a 3D project around what the visitor needs to do. Three illustrative budgets explain the scope of an interactive element, product viewer and complete website.

For an initial budget, the examples in this guide allow €1,500–€3,000 for one interactive 3D element, €3,000–€6,000 for a product viewer, and €8,000–€18,000 for a website with multiple animated scenes. These are illustrative planning budgets for the defined scopes below. I prepare a project quote after reviewing the assets, interactions and integration requirements.

The figures are in euros and exclude VAT, ongoing hosting and paid third-party services. They assume supplied models suitable for the web, with limited preparation. Creating models from scratch, detailed CAD conversion or extensive material work requires a separate allowance. Any applicable tax is identified in the proposal.

My animation and 3D services cover these different project scopes. A rotating object added to an existing page has a different set of requirements from a website where the camera travels between scenes and page transitions are part of the experience.

The examples below describe three possible starting points. They are illustrative scopes; the final quote depends on the assets, interactions and integrations we agree on.

Each example allows for an agreed visual direction, two review rounds, checks on the agreed devices and launch assistance. Extra concepts, new interactions introduced during development and ongoing support need to be scoped separately.

Example scopeIllustrative budgetMain assumption
One 3D element on an existing site€1,500–€3,000One supplied model and one interaction inside an existing page
One product viewer€3,000–€6,000One product, rotation and zoom, a small agreed set of views or material choices, and an existing product page
A website with multiple animated scenes€8,000–€18,000Two connected scenes, a limited set of interactions and a small set of HTML content pages

These scopes do not include a commerce configurator, a large product catalogue or a photorealistic simulation. Each would need a more detailed brief.

One interactive 3D element on an existing website

This could be a product, logo or other object that responds to dragging, scrolling or pointer movement. The existing website continues to provide the navigation, content and enquiry or purchase flow.

An example scope is one supplied model, one agreed interaction, responsive placement and a static alternative for situations where the interactive element cannot run. The work includes fitting the element into the existing site and checking its behaviour on the agreed devices.

The lower end suits a straightforward interaction with an asset that is already suitable. Additional animation states, unusual integration constraints or several design revisions increase the work. The surrounding site remains an existing part of the project.

Model creation, a redesign of the surrounding website and connections to product data would be separate scope items. A technically suitable model can reduce preparation work, but I need to inspect the file before assuming it is ready to use.

This is a useful starting point when one interaction helps explain the product or gives a specific part of the page a visual identity.

A product viewer

A product viewer lets someone rotate and examine an object. It may also include a small set of predefined views or material options.

An example scope is one product model, rotation and zoom controls, a reset view, readable product information and placement within an existing product page. It needs loading behaviour, mobile interaction and a fallback that leaves the product information available.

My example 3D product view illustrates the kind of experience we can discuss. It is labelled as an example project.

If customers need to assemble parts, select compatible options, see changing prices or add a configured product to a basket, the project becomes a configurator. That introduces product rules and integration work. Those requirements should be written into the quote so that everyone knows what the finished viewer will do.

A complete website with multiple animated scenes

This scope combines website design and development with the 3D experience. It can include scene composition, camera movement, transitions, ordinary content pages and a contact journey.

My portfolio demonstrates this approach. Its homepage uses a scene with water, a floating cube and camera movement. Visitors can continue to services, projects and contact through the site's navigation.

The portfolio illustrates possible interactions. Reproducing all of its water, drawing and transition effects would need a separate scope; those features are not automatically included in the example budget.

An example brief might describe two connected scenes, a defined set of interactions and a small number of HTML content pages. It would also specify which content the owner can edit and which visual changes require development work.

The scene count alone does not establish the price. One detailed scene with several interactive objects can involve more work than multiple simpler views. The quote needs a description of the experience, including how a visitor enters, explores and leaves it.

What changes the cost

Model preparation

A model made for manufacturing or an offline render may need substantial work before it is suitable for a browser. Preparation can include reducing detail, organising movable parts, creating materials and checking that textures look acceptable at practical file sizes.

For a product viewer, visual accuracy may be important. For an abstract brand scene, composition and movement may matter more. We agree on the required detail and who supplies the source files before assigning the asset work.

Interaction and content

One rotation control is a smaller problem than several linked states, camera paths or a product configuration. Each added interaction also needs clear controls and behaviour when the screen size changes.

Content management is another scope item. Editing a service description in WordPress is different from changing a model or camera path. A quote should identify exactly what you can update yourself.

Mobile behaviour and loading

An interaction that feels clear with a mouse can be awkward on a phone. Dragging can conflict with page scrolling, and smaller screens leave less room for controls and product information.

The project needs time to check those behaviours, manage asset loading and adjust rendering work to the target devices. In my portfolio, rendering resolution and effects adapt to available frame time. A client project would need an approach suited to its own scene and audience.

Integration and maintenance

An element on a static page, a viewer inside WordPress and a configurator connected to a shop have different dependencies. Access to the existing site, product data and external services affects the work required.

After launch, models, browser behaviour or product options may change. Agree on who handles those updates, which source files are handed over and whether ongoing support is included. Hosting, paid assets and third-party services should be listed separately when they apply.

When 3D is useful to the visitor

Start with the task. A viewer may help someone inspect a product from an angle that photographs do not show clearly. An animated scene may demonstrate a mechanism or make a brand story easier to follow.

Essential details still need readable text, images and a clear next step. A customer's ability to contact you or inspect specifications should remain available while visual assets load.

If the useful interaction is limited to one object, we can scope that first. You can then assess how visitors use it before committing to a larger experience. A visual feature's effect on enquiries or sales needs to be measured after launch.

What I need to prepare a quote

Send a link to the existing website, describe what the visitor should be able to do and share any model files or visual references. Include the number of products or scenes, required content editing, intended devices and your target launch date.

A rough budget helps identify which scope is practical. I can then describe the deliverables, asset assumptions, ongoing costs and review stages in the proposal.

Discuss a 3D project. Tell me what you want someone to understand or do through the experience. The first consultation is free, and sending an enquiry carries no obligation.

Written by Henry Lõiv

Keep reading

All articles
  1. When does an interactive 3D product viewer make sense? A useful 3D product experience answers a specific customer question. Here is how to define the interaction, prepare the assets and plan the next step. 3D & WebGL 5 min read
  2. How I built this 3D portfolio and made its content accessible to Google The 3D scene demonstrates my work. Individual HTML pages explain it. This is how the portfolio connects the two, handles navigation and manages rendering work. Development 5 min read

Let’s talk about your project

Tell me about your project

Tell me what you’d like to build or improve. You don’t need a finished brief — we’ll work out the scope and next steps together.

01 How can I help?
02 How many pages do you need?
03 Which extras do you need? Choose all that apply
04 When does it need to be ready?
05 Project details
06 Your contact details

Enquiry sent

Thank you!

I’ll reply by email.