Goldenboy · Reading · 02
No build step
An interactive 3D page normally arrives as a project with a toolchain. This one arrives as a document. Here is what that removes, how you work with it, and what it costs you.
01What a build step is actually for
An interactive 3D page normally arrives as a project, not a page. The toolchain exists to do four things: resolve module imports into something a browser can load, bundle and minify the result, hash asset filenames for cache-busting, and copy textures and models into a public directory. Every one of those is a build-time answer to a question about where things live.
None of those questions exist once everything is already in the document. There are no imports to resolve because there are no separate modules; no asset paths to rewrite because there are no separate assets; no cache-busting problem beyond the filename of the page itself.
02What ships instead
The renderer, the scene, the interaction and the imagery are inlined into one document at authoring time. Object 01 carries Three.js r185 inside it — the version it was authored against is the version it will run forever, because there is no resolution step that could hand it a different one.
- Node or npm required to run it
- none
- node_modules / lockfile
- none
- Bundler, transpiler, CI
- none
- Commands between file and live site
- one upload
- Version drift
- impossible — the renderer is inside the file
This is not a claim that toolchains are bad. It is a claim about what a finished page needs: a build step is infrastructure for work in progress, and a delivered artifact is not work in progress.
03How you edit one
Open the file in any editor. The authored strings — wordmark, headline, lede, and the six annotation labels bound to the six petals of Object 01's shell — sit as plain constants near the top of the inline script, not buried in minified output. Change them, save, reload the file from disk. There is no watcher to start and nothing to rebuild.
- Replace the wordmark and headline with your own.
- Write the six annotation labels, or strip them and ship the object bare.
- Tune the palette — the brass, glass and ceramic values are named constants.
- Adjust the camera framing for the container you are putting it in.
- Reload from disk to see the change. Ship the same file you were just looking at.
Because the file you edit is the file you deploy, there is no class of bug where the built output differs from what you tested. What you opened is what the visitor gets, byte for byte.
04How you deploy one
# the entire deployment
cp object.html /var/www/site/index.html
Or drag it into any static host's dashboard. It is equally happy as one route inside an existing site, or in a sized iframe with an accessible title. Serve it with Cache-Control: public, max-age=0, must-revalidate if you intend to edit it in place — a single-file page busts its cache by name or not at all.
05What you give up
- No hot module replacement. Editing means saving and reloading — fast for copy, tedious for authoring a whole new scene.
- No tree-shaking or code-splitting, so the page is as large as everything inside it.
- No type checking, linting or test harness in the delivered file; it is a finished artifact rather than a codebase.
- Large diffs. One document changing is one enormous diff, which suits an artifact and not a team's shared source.
- No CMS or data layer. If the words need to change weekly, this is the wrong container for them.
06What still has to be right in the file
Dropping the toolchain does not drop the responsibilities. Both objects carry a responsive layout for desktop and mobile, a reduced-motion path for visitors who ask for one, and — for the WebGL object — a still fallback for devices that cannot render it. Those are authored into the document, and they are what separates a self-contained page from a demo that only works on the machine it was made on.
The format itself, and how to verify a file is genuinely self-contained, is covered on the single-file page. What you receive versus a template or a commission is compared here.
FAQQuestions
- Do I need Node or npm installed?
- No. There is nothing to install and nothing to run. The file is opened in an editor to change text, and uploaded to a host to publish it.
- Will it break when Three.js releases a new version?
- No. Object 01 carries Three.js r185 inside the document, so the renderer it was authored against is the renderer it runs. There is no resolution step that could substitute a different version.
- Can I use it inside a React or Next.js project?
- Yes, in one of two ways: serve it as a static file from your public directory and link to it, or embed it in an iframe with an accessible title. It does not need to be ported into your component tree, and there is no benefit to doing so.
- How do I change the copy?
- The wordmark, headline, lede and the six annotation labels are plain constants near the top of the inline script. Edit them, save, reload the file from disk, then upload the same file you were just looking at.