Three.js 3D web development

When Three.js is the right choice

Three.js is a JavaScript library that draws 3D scenes on a web page using the browser’s WebGL support. There is no app to download: anyone who opens the link sees the scene on a phone or a computer. It is most useful in configurators, where customers adjust a product to their own needs and see the result straight away.

Where Three.js fits well

Your product changes with measurements or options, and customers find it hard to decide without seeing the result
You want customers to prepare their own design and send it to you before the sales conversation
Showing a space, a layout or a product from every angle says more than a photo
You want a light visual effect on a marketing page that doesn’t overshadow the content

Where we would not suggest Three.js

A few good photos or a short video explain the product well enough
You need exact technical drawings for production: a design in the browser is a first draft and does not replace engineering drawings (CAD)
The product itself is a game or a virtual reality experience: game engines suit that better

Atölye Tasarım: building a school workshop in the browser

In the configurator we built for okultasarım.com, a school builds its workshop in four steps: it enters the room’s measurements and shape, picks the number of students and the school level, chooses the colours, then sends the design to the firm over WhatsApp. There are separate configurators for woodwork, ceramics and art, and cooking workshops. Notable decisions in the code:

The layout is calculated by a plain TypeScript function that doesn’t depend on React: workbenches, tables and stools are placed while keeping the door area, walls with windows and walkways clear, and these rules are checked by tests.
There are no ready-made 3D model files. Workbenches, tables, stools, the ceiling frame and the sign are generated in code by components that take their measurements as parameters, so the model changes when the measurements do.
Stools are drawn with a single InstancedMesh per part, so the number of draw calls doesn’t grow with the number of students.
When a module is added or a measurement changes, parts settle into place with a spring animation; nothing jumps from one position to another.
In advanced mode the room can be L-shaped, and columns and wall features are placed by dragging them on a top-down plan.
The design is compressed and kept in the address bar, so it survives a page reload and can be shared as a link.
On sending, the scene is rendered to images from fixed camera angles and a share image is created; the firm sees the design on its own share page.

Plain Three.js or React Three Fiber

We use both. For scenes with many parts that talk to the interface all the time, we choose React Three Fiber: every piece of furniture in the scene is a React component, and every change in the panel goes straight into the scene. For a single visual effect, plain Three.js with a shader of our own means less code and a smaller bundle. The pointer-following particle field on this site’s home page is written that way; it stops drawing when it is out of view or the tab is in the background.

	React Three Fiber	Plain Three.js
How the scene is written	As React components	Objects are created one by one in code
Link to the interface	Panel and scene share the same state	Wired up by hand
Good fit for	Configurators, interactive scenes with many parts	Single effects, light backgrounds
Our example	Atölye Tasarım	The particle field on the pepechura.com home page

What we use alongside Three.js

React Three Fiber

To build a Three.js scene from React components. The whole Atölye Tasarım scene is written with it.

drei

Ready-made camera controls, environment lighting, contact shadows, 3D text and performance monitoring. Switching between the perspective view and the top-down plan uses drei’s CameraControls.

postprocessing

Soft shading in corners and joints (N8AO) and cinematic tone mapping. Off on phones, and switched off automatically on a computer if the frame rate drops.

react-spring

Spring animations for modules settling into place and for measurement changes (@react-spring/three).

Zustand

The design state shared between the configurator’s panel and its scene.

Test Renderer and Vitest

Scene components are tested with @react-three/test-renderer without opening a browser; the layout and price calculations are tested separately with Vitest.

How a 3D configurator project runs

01
Free scoping call
30 min
We talk about which measurements and options change your product, what the customer does once the design is finished and the budget you have in mind.
02
Written scope and quote
We write down the options, the layout rules, the image quality targeted on phones and computers, and the acceptance criteria.
03
Weekly releases
Every week you try a working version of the scene on your phone and computer; your comments on measurements and looks steer the next week.
04
Testing and release
A senior QA tests the configurator on different phones and browsers before release; the fallback screen for devices that cannot open 3D is checked at this stage too.
05
The 30 days after launch
30 days
We fix the bugs that surface in this period free of charge; after that you can continue with monthly maintenance.

Timelines and budget ranges are published on our web application development and pricing pages; everything on this page follows the same figures.

Questions about Three.js

Does a 3D configurator run smoothly on a phone?

We take several measures for that. In Atölye Tasarım the scene is redrawn only when something changes; on phones the resolution is capped and shadow effects are off from the start; on a computer, effects switch off by themselves if the frame rate drops. In browsers without WebGL, the home page shows a photo instead of the scene, and the configurator offers to continue over WhatsApp.

Can search engines see the 3D scene?

The scene is drawn in the browser and search engines don’t read it; what they need to read is the information the scene conveys. On Atölye Tasarım, the page text, headings and share images are prepared on the server with Next.js, and the 3D scene loads after the page opens.

Can you use the 3D models we already have?

Atölye Tasarım has no ready-made model files at all; the furniture is generated in code from the measurements, which is why it fits any size. If you have 3D models of your products, we look at their format and size together in the scoping call and decide which route suits.

Can the configurator show a price as well?

Yes. In Atölye Tasarım an estimated price range comes out of the selected modules, with a clear note that it isn’t binding. When the design is sent, the price is recalculated on the server; the figure coming from the browser isn’t trusted.

What do I keep when the project ends?

A perpetual licence to use the software, and its documentation. Having the source code transferred to you is possible for an extra fee, written separately in the quote.

Three.js 3D web development

What we have built with it

Atölye Tasarım