What does a Three.js developer actually do?
A Three.js developer writes the JavaScript that draws interactive 3D inside a web page using WebGL, the browser’s graphics interface. Three.js is an open-source library that wraps WebGL’s low-level calls in friendlier objects: scenes, cameras, lights, meshes, materials and loaders.
In day-to-day terms, the job is part front-end developer, part technical artist and part performance engineer. The developer loads models, sets up lighting and camera movement, connects clicks and scrolls to the scene, and then spends a surprising share of the time making it lighter: fewer triangles, smaller textures, fewer draw calls, smarter loading. The last part is what separates a nice demo from something your customers can use on a train with patchy 4G.
When you hire a Three.js developer, you are also hiring someone who must work with other people’s files. Designers hand over mock-ups, 3D artists hand over models, backend developers expose product data. A good hire knows how to ask for assets in the right format and how to push back when a model is ten times heavier than the page can carry.
- Scene work: cameras, lights, environment maps, shadows and post-processing.
- Asset pipeline: glTF/GLB loading, compression, texture formats and level of detail.
- Interaction: orbit controls, raycasting for clicks, scroll timelines and UI overlays.
- Integration: connecting the canvas to React state, carts, forms and APIs.
When should you hire a Three.js developer instead of using a no-code tool?
Hire a Three.js developer when the 3D has to respond to your own data or business logic; use a no-code tool when it only has to look good. Tools such as Spline, or a product-viewer web component like Google’s model-viewer, cover a lot of ground: a rotating hero object, a simple viewer with AR on phones, a decorative scene.
Code becomes worth paying for once the scene needs things a visual editor cannot express cleanly. Typical triggers are prices or stock that change the scene, hundreds of product variants loaded from a database, a camera path tied to scroll position and text panels, custom shaders for materials like brushed metal or fabric, or tight control over loading so a slow phone gets a lighter version.
A second trigger is ownership. A scene built in a hosted editor usually lives on that platform. A Three.js codebase lives in your repository, runs on your hosting and can be changed by any competent developer you hire later. For brands planning several years of product launches, that independence often matters more than the first build cost.
No-code is usually enough for
A decorative hero, a single product spin, a portfolio piece, a campaign page that lives for one month.
Code is usually worth it for
Configurators, data-driven scenes, multi-step product stories, anything tied to a cart or a quote, and pages that must hit strict mobile speed targets.
React Three Fiber vs vanilla Three.js: which should your developer use?
Use React Three Fiber when the rest of your product is already a React or Next.js app; use vanilla Three.js when the 3D is a standalone piece or sits on a non-React site. Both draw with the same engine underneath, so the choice is about how the code is organised and who maintains it.
The React Three Fiber documentation describes it as “a React renderer for three.js”, which lets you build scenes “declaratively with re-usable, self-contained components that react to state”. In practice, a <mesh> in JSX becomes a Three.js mesh, and your React team can reason about the scene with the same patterns they use for forms and lists. The pmndrs ecosystem around it, such as drei helpers, saves a lot of boilerplate for loaders, controls and environment lighting.
Vanilla Three.js suits a small scene embedded in WordPress, Webflow, Shopify or Astro, where pulling in React only for one canvas would add weight. It is also easier to reason about for tight render loops and unusual memory management. When you hire a Three.js developer, ask which approach they recommend for your site and why; a developer who only knows one will push it everywhere.
If your app is moving to Next.js anyway, our React to Next.js migration notes explain how a 3D canvas is kept client-only so server rendering does not break it.
How to check a Three.js developer’s portfolio properly
Open every portfolio link on a mid-range Android phone over mobile data, not on a gaming laptop. A showreel video proves nothing about performance; a live URL shows load time, frame rate, heat and what happens when the GPU struggles.
Most Three.js portfolios look impressive on a desktop with a dedicated graphics card. The useful questions are what the visitor sees in the first two seconds, whether the page is usable before the 3D arrives, and whether the scene drops to a lighter version on weaker devices. If a portfolio piece shows a white box and a spinner for five seconds on your phone, expect the same on your project.
Then ask about the parts you cannot see. Who made the models? How big was the GLB before and after optimisation? What did they change after testing on real phones? A developer who can answer with specifics, even rough ones, has done the work. A developer who only talks about how the scene looks may have only assembled someone else’s template.
- Time to first meaningful paint on a phone, before the canvas is ready
- Frame rate while rotating the model; any stutter or heating
- Behaviour on tab switch and return: does the scene recover or crash?
- Text, prices and buttons in HTML, not painted inside the canvas
- A reduced-motion or static alternative for people who need it
3D model optimisation: the GLB and Draco skills your hire must have
The single most valuable skill when you hire a Three.js developer is shrinking 3D assets without visible loss. Most slow 3D pages are slow because of the model, not the code.
The standard delivery format is glTF, which the Khronos Group calls “the JPEG of 3D”; glTF 2.0 was published as the international standard ISO/IEC 12113:2022. A GLB file is the single binary version that packs geometry, materials and textures together. On top of that, geometry can be compressed with Draco: the Three.js documentation explains that when Draco is used with glTF, GLTFLoader uses DRACOLoader internally, and that the loader picks the JavaScript or WebAssembly decoder based on browser capabilities. Textures can be delivered as KTX2 with Basis Universal supercompression through the Khronos KHR_texture_basisu extension, which keeps GPU memory lower than plain JPEG or PNG.
Before any of that, a skilled developer cleans the model itself: deletes hidden interior parts, merges meshes that share a material, bakes lighting into textures where real-time lights are not needed, and creates lower-detail versions for distant or mobile views. Ask a candidate to walk you through what they would do with one of your real files. The answer tells you more than any CV.
Red flag
A developer who loads a raw export from CAD or a marketplace model straight into the scene and plans to “optimise later”.
Green flag
A developer who asks for the source file, reports the triangle count and texture sizes, and proposes a target file size before starting.
Mobile GPU performance budgets: what to write into the brief
Write a performance budget into the brief before you hire anyone: a target file size for the 3D download, a triangle and texture ceiling, and the lowest phone the scene must run on smoothly. Without numbers, “fast” means whatever the developer’s own device can handle.
The page as a whole is still judged on Google’s Core Web Vitals. web.dev states that Largest Contentful Paint should occur within 2.5 seconds, Interaction to Next Paint should be 200 milliseconds or less, and Cumulative Layout Shift should be 0.1 or less, measured at the 75th percentile of page loads. A 3D canvas that blocks the main thread while a large model decodes can hurt all three. The fix is architectural: show HTML and a poster image first, load the scene when it scrolls into view, decode geometry in a worker where possible, and reserve the canvas space so nothing jumps.
On the GPU side, the main levers are device pixel ratio (capping it on high-density phone screens), draw calls (merging and instancing objects), texture memory and shadow quality. A developer worth hiring will test on a real low-end device, not only in Chrome’s device emulation, and will show you the numbers. Our starting budgets are in the table further down; we adjust them after testing on the phones your buyers actually use.
How much does it cost to hire a Three.js developer in India?
With us, a Three.js section on a normal website starts at ₹10,000 (US$150), a store with 3D product viewers starts at ₹50,000, and a custom WebGL application or configurator starts at ₹60,000 (US$900). Every figure is a starting price; the itemised quote shows how yours is built up.
Across the market, quotes to hire a Three.js developer vary widely, and the gap is rarely about the developer’s city. It comes from a handful of drivers that you can control once you know them:
- Asset state: web-ready GLB versus raw CAD that needs cleaning and re-texturing.
- Number of models and variants: one product versus a catalogue of 200 SKUs.
- Interaction depth: rotate and zoom, or swap parts, animate, measure and price.
- Custom shaders and effects: glass, fabric, water, particles, post-processing.
- Device range: desktop-only showcase versus smooth on entry-level Android.
- Backend needs: saved designs, admin panel, pricing rules, cart or CRM hand-off.
- Accessibility and fallback: reduced-motion version, keyboard controls, static images.
If you want a feel for web app pricing beyond 3D, the breakdown on web application development cost uses the same drivers. Payments within India go by UPI or bank transfer with a GST-ready invoice discussed in your quote; overseas clients pay in USD by Wise, wire or PayPal.
Hourly or project pricing: which is better when you hire three js developer help?
Project pricing with milestones is safer for a defined scene; hourly or monthly arrangements suit open-ended exploration and ongoing tweaks. The risk in 3D work is that “just one more effect” never ends, and an hourly meter hides that until the invoice arrives.
With a project quote, you agree up front what the scene does, which devices it must run on, how many models are included and what counts as done. Changes outside that list are quoted separately before any work starts. You always know the next amount you will pay and what you get for it.
Hourly billing makes sense in two cases: research spikes where nobody knows yet whether an effect is possible at an acceptable frame rate, and long-running products where a developer is essentially part of your team. Even then, cap the hours per week and ask for a short written log. We quote per project by default; if an ongoing arrangement suits you better, ask us and the terms go into your written quote rather than being assumed.
Choose project pricing when
You can describe the finished scene, you have the models or know who is making them, and there is a launch date.
Choose time-based pricing when
You are prototyping an idea with unknown feasibility, or you need a few hours of 3D help every month for a live product.
Interview questions and a fair test task for a Three.js hire
The best test is small, paid if it takes more than an hour or two, and uses one of your own models. Ask the candidate to load it, light it, add orbit controls, and report the before-and-after file size and frame rate on a phone.
Pair that with a conversation. You do not need to be technical to judge the answers; listen for specifics and for questions coming back to you. A strong candidate will ask what devices your customers use, where the models come from, and what the scene is supposed to make people do.
- How would you make this model load in under two seconds on 4G?
- When would you choose React Three Fiber over plain Three.js for us?
- How do you dispose of geometries and textures to avoid memory leaks on route changes?
- What do visitors see if WebGL fails or the device is too weak?
- How do you keep product text and prices readable by search engines?
- Which parts of this job would you hand to a 3D artist, and why?
If the answers are vague, the build will be vague. If you would rather skip the interviewing, send us your brief and one model; the quote itself will show you how we think about these questions.
Should you hire a freelance Three.js developer, a studio or a full-time engineer?
Hire freelancers for a scoped build, a creative studio when original art direction and modelling are the main value, and a full-time engineer when 3D is the core of your product for years. Each route solves a different problem.
A creative studio brings concept art, 3D artists and motion designers, which is ideal for an award-style campaign. You pay for that range even when your brief mostly needs engineering. A full-time hire gives you continuity and deep product knowledge, but recruiting someone with real WebGL depth takes time, and one person rarely covers backend, hosting and 3D equally well.
A small freelance team sits between the two. With us you get three people: one of us on full-stack and front-end 3D, another of us on cloud, data and technical SEO, and the third of us running the project plan and automation. That covers the canvas, the API behind it and the hosting, without paying for a creative department you do not need. What we do not do is photoreal modelling from scratch, VR headset apps or console-style games; if your brief needs those, we say so in the quote.
Comparing broader options for front-end work? Our freelance React developer page covers the same trade-offs for non-3D interfaces.
How long does a Three.js project take from brief to launch?
A single optimised 3D section takes about two to three weeks; a store with product viewers four to eight weeks; a custom configurator or WebGL app six to twelve weeks. Asset readiness moves these numbers more than anything else.
The first week is always about assets and budgets. We check your models, measure them, agree the target file size and the lowest supported phone, and build a rough scene with placeholder lighting so you can feel the interaction early. That greybox is cheap to change, which is exactly why it comes first.
The middle weeks go into materials, interaction, the HTML layer around the canvas and the fallback states. Final weeks are for device testing, accessibility, analytics events and loading order. You review everything on a staging link that you can open on your own phone and share with colleagues on WhatsApp. For a broader view of software timelines, see how long it takes to build a website.
What should you own when a Three.js developer hands over the project?
You should own the source code repository, every original and optimised model file, the texture sources, the build scripts and the hosting account. If any of those sit only on the developer’s laptop, you do not really own the scene.
3D projects have more moving parts than a normal site. Beyond the code, ask for the optimisation settings used for each model (so the next person can re-export a changed product the same way), the environment maps and HDR files, the list of third-party libraries with their licences, and a short README explaining how to run and deploy the project.
We work inside repositories and hosting accounts created in your name from day one, so there is nothing to transfer at the end. After launch you get two months of free maintenance for fixes; after that, ongoing care starts at ₹8,000/mo. If a question comes up about licences for purchased models or fonts, we flag it early; the purchase itself should be in your name.
- Git repository with full history, in your organisation
- Source and web-ready model files, with optimisation notes
- Textures, HDR environments and any purchased asset licences
- Deployment steps and environment variables documented
- Analytics events list: what the scene tracks and why
Red flags when you hire a Three.js developer
The clearest red flag is a developer who has never shown work running on a budget phone. The second is one who promises a price before seeing your models.
Other warning signs come up in the first conversation. Watch for vague talk about “making it pop” with no mention of file sizes; reluctance to put the code in your repository; a plan to paint all text, prices and buttons inside the canvas; no fallback for devices without WebGL; and templates from marketplaces presented as original work. None of these is proof of bad intent, but each one tends to show up later as a slow, fragile page that only its author can change.
Be careful, too, with anyone who guarantees specific conversion or engagement uplifts from 3D. Nobody can promise that. The honest route is to launch the scene against a strong still-image version and compare enquiries. Similarly, nobody can guarantee search rankings; a good developer will only promise to keep the page crawlable and fast.
- Only showreel videos, no live links
- Fixed timeline quoted before seeing assets
- No mention of mobile testing or fallbacks
- Code or models kept on the developer’s own accounts
- Heavy post-processing effects on every device by default
Will a Three.js page hurt SEO, accessibility or AI search visibility?
A Three.js page hurts search visibility only when the important words live inside the canvas. Search engines and AI assistants read HTML text; they do not read pixels drawn by WebGL.
Keep the product name, description, price, specifications and FAQs in normal HTML around or over the canvas. Add structured data for products where it applies, a descriptive poster image with alt text, and a sensible heading structure. Then Google, Bing and AI answer engines can understand and quote the page even though the 3D itself is invisible to them. Speed matters too, which brings us back to the performance budget: a scene that loads late but does not block the text barely affects Core Web Vitals.
Accessibility needs the same care. Respect the operating system’s reduced-motion setting, offer keyboard controls or buttons for rotate and zoom, never make the canvas the only way to reach information, and keep contrast readable over animated backgrounds. Another of us handles the technical SEO side of our builds, so these checks are part of the scope rather than an afterthought. Our website accessibility audit page lists what we check.
Hiring a Three.js developer from India: how the work runs
Hiring a Three.js developer in India works well when reviews happen on staging links and short calls, and the scope is written down before work starts. There are no site visits in this kind of work anyway; 3D is reviewed on screens.
For Indian clients, we are on the same clock, reply on WhatsApp seven days a week, and talk in English or Hindi. Payments go by UPI or bank transfer in milestones, nothing billed before your written approval of the quote. Many Indian buyers browse on entry-level Android phones on mobile data, so we default to lighter models, capped pixel ratios and a still-image path for weak devices. If your audience includes regional-language speakers, the HTML layer around the 3D can be bilingual; you supply or approve the translated text.
For clients abroad, our IST working day overlaps with European mornings and US evenings, quotes are in USD, and payment goes by Wise, bank wire or PayPal. Our guide to hiring Indian developers covers contracts and communication in more detail.
Worked example: a hypothetical EV scooter brand in Hyderabad
Say a small electric scooter maker in Hyderabad wants buyers to spin the scooter, switch between four colours and two seat options, and tap hotspots that explain the battery and motor. This is an illustration of how we would scope it, not a past client.
Step one is the model. Their industrial designer has a CAD file of several hundred megabytes. We would strip internal engine parts nobody sees, retopologise the body, bake ambient occlusion, and export a Draco-compressed GLB with KTX2 textures, targeting a download small enough for 4G. Colours become material swaps rather than separate models, so each change is instant.
Step two is the stack. Their site is already a Next.js app, so React Three Fiber is the natural fit: a ScooterViewer component with typed props for colour and seat, lazy-loaded below the hero, with a poster image rendered on the server. Hotspot text sits in HTML so it is readable by search engines and screen readers. The chosen configuration flows into their existing test-ride booking form.
Step three is testing on the cheapest phone in their target market, capping pixel ratio and dropping real-time shadows for baked ones on weak GPUs. Scope like this would typically be quoted from the custom web app band, starting at ₹60,000, with model clean-up as a separate line.
Checklist before you hire three js developer help
Run through this list before you sign anything. If you cannot tick most items yet, spend a week on the brief; it will save money in the build.
- The one action the 3D scene should drive: enquiry, add to cart, test ride, booking
- Models available? Format, file size and who owns them
- Lowest phone and browser the scene must run on smoothly
- Target download size for the 3D assets
- React Three Fiber or vanilla Three.js, and the reason
- Fallback for no-WebGL and reduced-motion users
- All selling text, prices and FAQs in HTML, not the canvas
- Repository, hosting and asset accounts in your name
- Milestones, change process and what counts as done
- Maintenance plan after launch
Send this list to us on WhatsApp with one model file, even unfinished, and you will get an itemised quote in about two working days. If the list points you towards a lighter build, the landing page developer route may be all you need.