// 3D development

3D websites: Three.js, WebGL and scroll animation

Practical guides, tool comparisons and notes from building 3D websites: Three.js, WebGL, GSAP, 3D models for the web and keeping it all fast on phones. I build these sites remotely from Leskovac, Serbia; the scope, price and timeline are set in a written offer. Pages in Serbian are on svilenkovic.rs/3d/.

Tutorials

14 pages

Step-by-step guides for 3D on the web.

// Tutorial Three.js Troubleshooting — Common Issues and Fixes Common Three.js issues: black screen, broken lighting, slow performance, glTF won't load — and the fixes that actually work. // Tutorial Three.js Memory Leak Fix — Disposing GPU Resources Three.js doesn't auto-dispose GPU resources — leaving geometries, materials, and textures uncollected leads to memory leaks that crash long-session apps. // Tutorial R3F Debugging — Tools and Patterns R3F debugging combines React DevTools, Three.js debugging tools, and leva for live tweaking — most issues are React lifecycle, not Three.js. // Tutorial WebGL 2 Tutorial — What's Different from WebGL 1 WebGL 2 brings instanced rendering, transform feedback, MRT, and modern GLSL ES 3.0 — what changes if you're moving from WebGL 1. // Tutorial WebGL Context Lost — Detection and Recovery WebGL context-lost errors crash the canvas — handle them gracefully by listening to the contextlost event and re-uploading resources. // Tutorial <model-viewer> Tutorial — Google's Web Component for 3D model-viewer is Google's lightweight web component for embedding 3D models with one HTML tag — works with glTF, includes WebAR. // Tutorial Theatre.js Tutorial — Visual Animation Editor for Web Theatre.js puts a real animation timeline panel in the browser — designers and developers animate together without JSON exchanges. // Tutorial How to Make Particle Effects in Three.js Build particle systems with BufferGeometry — 1K-100K particles depending on shader-vs-CPU approach. // Tutorial How to Make a Shader-Based Website Build site with custom GLSL shaders for hero — Three.js ShaderMaterial + vite-plugin-glsl + uniforms for time/mouse. // Tutorial Learn React Three Fiber — From React Dev to R3F Recommended R3F learning path: build small scenes, integrate drei helpers, learn Suspense for asset loading. // Tutorial 3D Website Deployment — Vercel, Netlify, Cloudflare Deployment options for 3D websites: Vercel/Netlify for HTML/JS, Bunny CDN for 3D assets, Cloudflare R2 alternative. // Tutorial How to Export Blender to GLB Blender to GLB export: enable Draco compression, set up materials properly, validate output before web use. // Tutorial How to Export Cinema 4D to GLB Cinema 4D to GLB: install glTF exporter plugin, configure materials for PBR, export and validate. // Tutorial How to Animate GLB for Web Animation pipeline: animate in Blender NLA, export with glTF, play with Three.js AnimationMixer.

Comparisons

8 pages

Two tools side by side, and when each one fits.

// Compare PlayCanvas vs Three.js — Practical Comparison PlayCanvas wins for collaborative team-based 3D web with non-developer content editors. Three.js wins for solo developers and creative coding. // Compare Three.js vs Spline — Code-First vs Visual Tool Three.js for code-led production, Spline for designer-led prototypes — different workflows, different fits. // Compare Three.js vs React Three Fiber — When to Pick Each Vanilla Three.js for smaller bundles and simpler scenes; R3F for component-driven 3D in React apps. // Compare Babylon.js vs PlayCanvas — Engine Comparison Babylon.js for code-first WebGL apps; PlayCanvas for editor-first collaborative 3D web with non-dev contributors. // Compare GSAP vs Anime.js — Premium vs Lightweight GSAP for complex timeline work and ScrollTrigger; Anime.js for simpler animations on smaller bundles. // Compare Lenis vs Locomotive Scroll — Modern vs Legacy Smooth Scroll Lenis for new projects in 2026; Locomotive Scroll for maintaining existing projects, no urgent need to migrate. // Compare Draco vs meshopt — Mesh Compression Comparison Draco for typical web 3D (better compression); meshopt for many-mesh scenes (faster decode). // Compare Three.js vs Unreal Pixel Streaming — Web Native vs Cloud-Streamed Three.js for native browser 3D; Unreal Pixel Streaming for streaming AAA-quality scenes from cloud GPU.

Technologies

15 pages

The libraries and formats behind a 3D site.

// Tech Three.js GLTFLoader — Loading 3D Models Right GLTFLoader is the standard way to load 3D models into Three.js — done right with Draco compression, KTX2 textures, and lazy loading. // Tech Three.js Editor — When to Use It, When to Skip The official Three.js Editor is a free WebGL scene editor in the browser — useful for quick scene building, limited for production work. // Tech Spector.js — WebGL Call Inspector for Three.js Spector.js captures every WebGL draw call your scene makes — invaluable for diagnosing performance cliffs and rendering bugs. // Tech lil-gui — Live Parameter Tweaking for Three.js lil-gui is the modern dat.gui replacement — drop sliders next to your scene to tune materials, lights, and shader uniforms live. // Tech Ammo.js Physics in Three.js — Bullet Physics for Web Ammo.js is the WASM port of Bullet Physics — full-featured rigid body simulation for Three.js scenes that need it. // Tech DRACOLoader in Three.js — Compressed glTF Meshes DRACOLoader unpacks Draco-compressed glTF meshes 50-80% smaller than uncompressed — essential for production 3D web. // Tech React Three Fiber Portfolio Template — Custom Build A custom R3F portfolio built for your brand, with proper scene composition, scroll-driven storytelling, and React-native architecture. // Tech @react-three/postprocessing — Effects for R3F The R3F-native bindings for the postprocessing package — bloom, FXAA, vignette, depth-of-field, all as React components. // Tech @react-three/rapier — R3F Physics with Rapier The R3F integration of Rapier physics — declarative rigid bodies, colliders, constraints as React components. // Tech WebGPU in Three.js — Modern Renderer for 2026 Three.js v0.158+ ships a WebGPU renderer that auto-detects browser support and falls back to WebGL — same API, better performance. // Tech Babylon.js Portfolio Examples and Templates Babylon.js portfolios are rarer than Three.js — when they exist, they tend toward technical demos rather than design-led showcases. // Tech PlayCanvas Developer for Hire PlayCanvas specialist for projects needing a real-time 3D web engine with editor — strong for web games and interactive product configurators. // Tech leva — Live Tweaking Hook for R3F leva is the React-native live tweaking library — the modern alternative to dat.gui and lil-gui for R3F development. // Tech Swup — Lightweight Page Transitions Alternative Swup is a lighter alternative to Barba.js — same SPA-style transitions, smaller bundle, simpler API. // Tech lygia Shader Library — Reusable GLSL Functions lygia (patriciogonzalezvivo/lygia) is a GLSL function library — noise, color, lighting, math, all reusable across projects.

By industry

5 pages

Where 3D helps a particular kind of business.

// Industry Car Dealership 3D Website — Inventory + Configurator Car dealership site with 3D inventory showcase, configurator, and virtual showroom — buyers commit before stepping in. // Industry Motorcycle 3D Website — OEM, Custom Builders, Racing Motorcycle brand sites — sport bikes, cruisers, custom builders, racing teams — 3D configurators and lifestyle scrollytelling. // Industry Coffee Roaster 3D Website — Sourcing and Roast Profiles Specialty coffee roasters with 3D — sourcing maps, roast profile visualization, brew guides, subscription integration. // Industry Law Firm 3D Website — Premium Legal Practice Marketing Law firms with 3D — restrained aesthetic, practice area showcases, attorney profiles, case study integration. // Industry Accounting Firm 3D Website — Premium CPA Practice Accounting firms with 3D — service area showcases, partner profiles, case study integration, premium positioning.

Use cases

1 page

Concrete things a 3D site can do.

// Use case Wedding 3D Website — Premium Wedding Microsite Wedding websites with 3D — venue 3D, RSVP, schedule, story scrollytelling, registry integration.

Services

5 pages

What I build and what you get.

// Service Animated Hero with Three.js — Custom Scene Build Animated hero section built from scratch in Three.js — custom geometry, custom shaders, custom interaction, fits your brand exactly. // Service Scroll Hero Animation — 3D Scene Driven by Scroll Hero scene that transforms as the user scrolls — camera moves, models morph, particles disperse, telling a story in seconds. // Service Cloth Simulation Website — Fabric That Drapes Realistically Fabric and cloth simulation in 3D web — useful for fashion brands where drape and texture sell the product. // Service Lightning Effect Website — Electric Bolt Animations Lightning and electric effects via line geometries and shader animation — for tech brands, energy companies, gaming. // Service Nebula Effect Website — Volumetric Cosmic Clouds Nebula clouds for cosmic-themed sites — volumetric particle clouds with color gradients and slow motion.

Scope and pricing

2 pages

What drives the scope; the price is in a written offer.

// Pricing Hire Shader Developer — GLSL Specialist Custom GLSL shader development — particle systems, distortion effects, photorealistic materials, fluid simulation. // Pricing 3D Website Cost — What Actually Drives It There is no honest single price for a 3D website without a brief. The quote depends on the scene, assets, interactions, integrations, content, device support and deadline.

Working with me

1 page

How the work runs with clients abroad.

// English Three.js Website Development for Premium Brands Three.js websites built to a fixed price agreed upfront, working remotely from Leskovac, Serbia, with clients in the EU and beyond.

Want 3D on your site?

Tell me what you need and I will send you a written offer with the scope and the price.

Get a quote +381 61 224 8989
Call
// Legal

Privacy Policy

Last updated: 2 November 2026.

This document explains, in plain language, what data I collect, why I collect it and how I keep it. No fine print.

Data controller

The data controller is D. Svilenković. I run this site, so for any question about your data email dimitrije@svilenkovic.com or call +381 61 224 8989.

What data I collect

  • When you write through the contact form: name, email, phone, project type and description.
  • When you use the free website check: the site address, the email for the report and your name if you enter it. The report goes only to that address.
  • When you visit the site: basic visit info (which page, time on page, device and browser).
  • When you become a client: details needed for invoicing (company name, tax ID, address).

Why I collect it

  • To reply to your inquiry and offer a solution.
  • To deliver the work and issue an invoice.
  • To see which parts of the site are useful and improve them.

Legal basis: your consent for visit statistics, steps taken at your request before entering into a contract for replying to an inquiry, and a legal obligation for invoices.

Who I share data with

I don't sell your data or share it with third parties for marketing. I use Google Analytics for visit statistics, only if you accept it in the cookie banner, and the site is hosted on a netcup GmbH server in Germany (EU).

The form is protected by a check that runs in your browser and on this server, without third-party services: a short background calculation, a time token and a limit on the number of inquiries. Your IP address is not stored for this check, only a one-way record of it that changes every day.

How long I keep it

Contact-form inquiries are kept up to 24 months, the typical span of pre-sale communication. Invoice data is kept as long as the law requires (up to 10 years).

Website check requests are kept just as long as inquiries, up to 24 months. The technical result of the check, without your email, is deleted after 30 days.

Your rights

At any time you can ask what data I hold, request correction or deletion, or withdraw consent. Email dimitrije@svilenkovic.com and I'll reply promptly.

Cookies

Essential cookies remember your language and your cookie choice for up to 12 months. Google Analytics 4 (Google Ireland Ltd) loads only after you click “Accept all” and sets cookies starting with _ga for up to 14 months. Advertising features and Google signals are off, and statistics are kept for 14 months. Data may be transferred to Google LLC in the USA under the EU-US Data Privacy Framework. When you withdraw consent, these cookies are deleted.

Complaints

If you think something isn't right, write to me first and I'll sort it out quickly. You also have the right to complain to the Commissioner for Information of Public Importance and Personal Data Protection.

Changes

If something changes, I'll update this page and the date at the top.
// Legal

Terms of Service

Last updated: 1 November 2026.

These terms describe how we work together. They're written in plain language — if anything is unclear, just ask.

Who provides the service

The service is provided by me, D. Svilenković, and I build the sites and apps myself. Contact: dimitrije@svilenkovic.com, +381 61 224 8989.

What I do

I build websites, web and desktop apps, online stores, Excel automation, appointment booking, system integrations, hosting and maintenance. I also make videos for social media, run Instagram, Facebook, TikTok and LinkedIn profiles, write posts and create AI images for them.

How we agree on work

  1. You tell me what you need. The conversation is non-binding.
  2. I send you a quote with the price and the timeline.
  3. When you confirm the quote, I start development.

Price and payment

The price is fixed and agreed upfront. You get the payment terms and the timeline in the quote before work starts. If the scope changes significantly, we agree on the new price before continuing.

Timelines

I give a deadline in the quote and stick to it. If I need material from you (images, text, access), please send it on time, because the deadline depends on it.

Revisions

Small revisions are included and done at no charge. Larger changes that go beyond the original scope are agreed separately.

Ownership

Once paid, everything I built is yours. You can use it, change it or move it to another developer without involving me.

Hosting and maintenance

I can host the site on my server and maintain it after it is built, and the quote states what that covers. You can move the site to another host at any time.

Liability

I do my best to make everything work as it should, but bugs happen. As soon as you report one, I fix it as fast as possible. My liability is limited to the amount paid for the project.

Cancellation

You can cancel at any time. You pay only for the work done up to that point, and receive all the materials and code you've paid for.

Disputes

If a disagreement arises, we'll first try to resolve it by talking. If that fails, the law of the Republic of Serbia applies and the court at the provider's seat is competent.

Changes to these terms

These terms may be updated. The last-updated date is shown at the top — you can always see what currently applies.