Can you make a 3D website yourself? Four routes, and where each gets hard
Yes: people do it every day, with free tools. How far you get depends on what the 3D has to do and how much you’re willing to learn. Showing one product that visitors can turn takes one HTML tag, if you have its model. A page that the scroll carries through a lit scene, and that still works on a mid-range phone, is a project.
Below are four routes, from the most control to the least code: three.js, Spline, a website builder with 3D, and Google’s model viewer. For each: what it is, what it asks you to learn, and where it gets hard. At the end, when doing it yourself is the right call, and when it isn’t.
The whole job — models, light, the scroll, phones, text for Google, the legal page — is laid out in how a 3D website is made; what it costs to have one made, in what a 3D website costs.
Route 1: three.js, in code
three.js is a free JavaScript library, under the MIT licence, for putting 3D on a web page; all four Promti kits are written with it. It gives you full control: any scene, any camera move, any effect you can program.
What it asks of you. Its manual assumes you already program in JavaScript and know the DOM, HTML, CSS selectors, ES modules and import maps. The recommended setup installs it from npm with a build tool such as Vite; even without one you need a local web server, because browsers won’t let WebGL load images straight from your disk. Then come the basics: a scene, a camera, a renderer and an animation loop that redraws the scene around 60 times a second. Models come in as glTF, the format the manual recommends.
Where it gets hard. Memory: three.js doesn’t free geometries, materials and textures on its own — each 1024 × 1024 texture takes 4 to 6 MB, its manual notes — and removing a mesh from the scene doesn’t dispose of it. Phones: rendering at a phone’s full pixel ratio is something the manual calls strongly not recommended for heavy scenes. And everything around the scene is yours to build: the scroll choreography, text over the canvas, reduced motion, a version without WebGL.
Where people learn it. Three.js Journey, Bruno Simon’s course, is 66 lessons and 93 hours of video for US$95, VAT included, paid once (US$120 with its WebGPU course), and asks for JavaScript basics first. If you work in React, React Three Fiber is a React renderer for three.js; its docs say you need to know both React and three.js before starting.
Route 2: Spline, without code
Spline is a 3D design tool that runs in the browser: you model, light and animate a scene without code, add states and events, and publish it as a link, an embed or code. Its Academy’s beginners’ course, Spline 101, is 16 videos, about four hours.
Where it gets hard. The scene lives in a site made elsewhere — Webflow, Framer, Wix, Shopify — or on Spline’s hosting, and the words around it are that site’s job; Spline’s pages say nothing about search engines. Its docs advise one or two embeds per page and fewer than three lights per scene. Web exports on the free plan carry a watermark, removed from Hobby at $12 a month billed yearly, and downloading the code export to host yourself needs Pro. More in Promti vs Spline.
Route 3: a website builder with 3D
Framer moves any layer in 3D space with 3D transforms — rotation, skew, depth, perspective — and brings real 3D scenes in through its Embed component, often from Spline. Its own help warns that embeds such as Spline 3D illustrations can slow a site down, even though Framer lazy-loads them. Webflow has a native Spline scene element that its interactions can animate, and 3D transforms that need perspective set on the parent element.
For its Studio Editor, Wix’s help centre says a 3D element can’t be added from the panel, and suggests an HTML iframe with outside code instead. Squarespace allows JavaScript and iframes in code blocks from its Core plan, and says code-based customisation is outside what its support covers.
Where it gets hard. The scene itself is still made elsewhere, usually in Spline, so you learn two tools and often pay two subscriptions. Promti vs Framer and Promti vs Webflow go through what each builder costs.
Route 4: one model on a page
If what you need is one product that visitors can turn and zoom — on a product page, say — Google’s model-viewer is a web component that shows a glTF or GLB model with a single HTML tag, and can open it in augmented reality on supported phones. It’s free, under the Apache 2.0 licence.
Where it gets hard. It shows a model; it doesn’t choreograph a page. You still need the model: made in Blender, which is free for any purpose and exports glTF out of the box, or commissioned. Its own FAQ says AR doesn’t work reliably everywhere, so treat it as an extra, and a model hosted on another server needs that server to send CORS headers.
When doing it yourself is the right call
When you already write JavaScript, or want 3D as a skill: three.js is the route, and the hours are an investment rather than a cost. When you want to design the scene yourself without code: Spline, inside a builder you already use. When you need one product to turn rather than a page to scroll through: model-viewer is the shortest path. And whenever you have more time than budget, and no date to be live by.
When it isn’t: when the site has to be online soon, hold up on mid-range phones, stay readable to Google and come with its legal page. That is the part of the work a demo doesn’t show. A Promti kit is that part done for one kind of business, for €500: you bring the words, the colours and the pictures, and in Product your own model — which the wizard offers to make with you on the 30-minute call.
Questions
- Do I need to know how to code to make a 3D website?
- Not for every route. Spline builds scenes without code, and Framer or Webflow can place them on a page. three.js needs JavaScript, and its manual expects you to know modules and the DOM too. model-viewer needs a line of HTML and a model.
- Can AI make a 3D website for me?
- Tools are starting to: Spline’s paid plans include AI 3D generation, and Spline Inc. runs Omma, which it describes as building 3D scenes, websites, games and apps from natural language, and which its own changelog called an early beta. Whatever makes the page, the checks stay the same: does it load on a phone, can Google read its words, does it work without the 3D.
- What format should a 3D model for the web be in?
- glTF, usually as a single .glb file. The three.js manual recommends it, model-viewer only accepts glTF and GLB, and the Khronos Group describes glTF as made for efficient transmission and loading. Keep it light: a lean mesh, textures no bigger than a screen needs, and compression where your viewer supports it.
- How long does it take to learn three.js?
- No official source gives a number, and it depends on how much JavaScript you already know. For scale, the best-known course, Three.js Journey, is 66 lessons and 93 hours of video on its own, and it starts from JavaScript basics.
- Can I start from a kit and change it myself?
- Yes. A kit downloads as plain HTML, CSS and JavaScript built on three.js, and the licence lets you change anything for your own business. Just know that if you later change something in the wizard and download again, the new download won’t contain your hand edits.