Skip to content
Contact me

3D for the web with WebGL and three.js

3D for the web with WebGL and three.js is a live scene drawn by the device GPU inside the browser, such as a product model that turns with scroll. Pavlo Zhydkykh builds these scenes for AI, fintech and B2B startups on Framer and Astro, with a static fallback for low-power devices and a fixed quote after a first call.

Does ChatGPT recommend your website?

Free report in 48 hours · 5 AI engines

Price
Fixed quote
Tech
WebGL, three.js
Fallback
Static image
Loads
When in view
Runs on
Framer and Astro
Feedback
2 rounds

Key takeawaysUpdated By

Key takeaways

  • WebGL is a JavaScript API that renders interactive 3D graphics in any compatible browser without plug-ins.[3]
  • Three.js is a JavaScript library on top of WebGL, released under the MIT License, and runs in all browsers that support WebGL 2.0.[2]
  • glTF stores a 3D scene as a JSON file, and a single binary .glb file can hold the models.[5]
  • Pavlo Zhydkykh quotes each 3D scene at a fixed price after a first call, and every scene has a static image fallback.
  • The scene loads only in view and stops rendering out of view, and headlines stay in HTML so search engines read the words.

What is WebGL?

WebGL is the browser API that draws 3D graphics with the device GPU, and three.js is a widely used JavaScript library built on WebGL. Together the two render a live scene that turns, reacts to the cursor or moves with scroll. WebGL matters because a real-time scene can show a product from every side, but the scene also costs battery and load time, so Pavlo sets a weight budget and a fallback.

Wikipedia: WebGL

Pavlo Zhydkykh

“A 3D scene should show something a photo cannot. If the scene is only there to impress, I would rather keep the page light.”

Pavlo Zhydkykh · Web designer and developer since 2016

Fit check

Is 3D for the web
right for you?

A good fit if

  • The product is physical or spatial, and a still image hides how the product works.
  • You have a 3D model, or a clear idea for a scene, and want the scene to react to the visitor.
  • The hero needs one strong moment that a photo or a loop cannot give.

Not the right fit if

  • Most of your visitors are on low-end phones, and a still image would say the same.
  • The 3D is decoration with no message: the scene costs load time for nothing.
  • Every frame has to look photo-real: a rendered video suits that better.

Compared

Real-time 3D vs a rendered video

A video is simpler when the motion never changes. Real-time 3D earns the extra weight when the visitor drives the scene.

Real-time 3D vs a rendered video
CriterionReal-time 3DRendered video
InteractionReacts to cursor and scrollPlays the same every time
SharpnessDrawn at screen resolutionFixed resolution
WeightModel, textures and three.jsGrows with length and quality
EditsColour or angle changed in codeRe-render for every change
LookReal-time lightingPhoto-real lighting possible
Best forProducts the visitor exploresFixed cinematic shots

Checklist

7 checks before a 3D scene goes on a page

A WebGL scene is often the heaviest thing on a page. Pavlo runs these seven checks on every scene before launch.

  1. 1. A reason to be 3D

    The scene shows something a still image cannot, such as how a product turns, opens or fits together.

  2. 2. A weight budget

    Models are simplified and compressed with Draco or meshopt, and textures are sized for the screen.

  3. 3. A static fallback

    Low-power devices and browsers without WebGL get a still image of the scene.

  4. 4. Loaded in view, paused out of view

    The scene starts when the canvas scrolls into view and stops rendering when the canvas leaves, which saves battery.

  5. 5. Text outside the canvas

    Headlines and buttons stay in HTML, so search engines, screen readers and translation tools can read the words.

  6. 6. A pixel ratio cap

    High-density phone screens render at a capped resolution, which keeps the frame rate steady.

  7. 7. Reduced motion respected

    Auto-rotation and camera moves stop for visitors who turn motion off.

How it works

From first call to a live 3D scene

The model, materials and interaction decide the timeline, so Pavlo fixes the date in writing together with the price. Two feedback rounds are included.

From first call to a live 3D scene, step by step
#StepWhenWhat happensYou get
01 First call Day 1 A call with Pavlo about what the scene has to show, the model you have and where the scene sits on the page. A clear brief
02 Scope and price Before work starts Model, interaction, weight budget and fallback are written into the scope with the price and date. A fixed price and date in writing
03 Look development After the brief Pavlo sets lighting, materials and camera in a test scene, with stills for approval. An approved look
04 Build and interaction After sign-off The scene built in three.js with scroll or cursor interaction, on a preview link. A working scene to test
05 Performance and feedback After the build Phone and desktop tests and the fallback image, then your comments in two feedback rounds. A tested, final scene
06 Launch Agreed date The scene goes live on your Framer or Astro site, loading only when in view. A live scene with the fallback

In their words

3D on the web, from
the docs and clients

Word for word, with the source linked: research, official documentation and the people Pavlo Zhydkykh has worked for.

“WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.”

MDN Web DocsWebGL: 2D and 3D graphics for the webSource ↗

“Three.js runs in all browsers with support for WebGL 2.0.”

WikipediaThree.jsSource ↗

“The core of glTF is a JSON file that describes the structure and composition of a scene containing 3D models, which can be stored in a single binary glTF file (.glb).”

Khronos GroupglTF: Runtime 3D Asset DeliverySource ↗

“One of the best contractors I have worked with. Really thoughtful about communication. Would 100% hire again.”

Remi LabelleCOO, Accolade Pro · Web app designSource ↗

“He is amazing in what he contributes, both design-wise and also from the ideas.”

Oliver BockOwner, The B2B Answer · Website design, 2025Source ↗

“The web and mobile designs he created were amazing. His communication was prompt.”

Corentin BernardCEO, Accolade Pro · Web and mobile app designSource ↗

FAQ

Questions about
3D for the web

Still unsure? Ask your AI about Pavlo Zhydkykh:

ChatGPTPerplexityClaudeGeminiGrok

Q.01

How much does a 3D scene cost?

There is no public price, because a turning logo and an interactive product model are different jobs. Pavlo gives a fixed quote after a first call, in writing, before work starts.

Q.02

How long does a 3D scene take?

Pavlo fixes the date with the price after the first call. The date depends mostly on whether a ready 3D model exists, and two feedback rounds are planned into the schedule.

Q.03

Who owns the scene?

You do. The scene code, optimised model files and fallback images are handed over as part of your site, and three.js is open source under the MIT licence.

Q.04

What do I need to provide?

Your 3D model in glTF, FBX or OBJ if you have one, plus brand colours and a reference for the look. If there is no model yet, tell Pavlo on the first call, because modelling changes the scope.

Q.05

Will 3D slow down my site or drain phones?

A heavy scene can, which is why Pavlo gives every scene a weight budget, loads the scene only in view, pauses the scene out of view and falls back to a still image on low-power devices. Speed is checked on a phone before launch.

Q.06

What happens after launch?

The scene runs as part of your site, with no monthly fee. Changes such as a new model or colour cost $30 an hour with Pavlo, with no retainer.

Sources and further reading

  1. [1] WikipediaWebGL
  2. [2] WikipediaThree.js
  3. [3] MDNWebGL API
  4. [4] three.js Docsthreejs.org/docs/
  5. [5] Khronos GroupglTF
  6. [6] MDNprefers-reduced-motion
Pavlo Zhydkykh

About the author

Pavlo Zhydkykh

Pavlo Zhydkykh is a web designer and developer in Eastern Europe who has built websites for AI, fintech and B2B startups since 2016, designing and building each project himself on Framer or Astro + Sanity. Clients include MStudio Asia, Silicon Data, Inturai, Accolade Pro, NimbleStax and Sancts.

  • Top Rated on Upwork
  • 100% Job Success
  • 10 years since 2016
  • 50+ sites shipped
  • 90+ PageSpeed at launch
Kulparkivska St. 200, Lviv 79021, Ukraine +380 93 610 62 68 [email protected]

LinkedInUpworkContra Privacy policy

Page reviewed by Pavlo Zhydkykh · Updated

AI visibility check

  1. 1Website
  2. 2Business
  3. 3Contact
  4. 4Check

Does ChatGPT recommend your website?

Pavlo Zhydkykh asks ChatGPT, Perplexity, Gemini, Claude and Grok 20 questions your buyers ask, and shows where you show up.

Free · report in 48 hours