Houston, we're coding 3D! 🚀

Does Three.js have to be rocket science in 2026?

Scroll to explore
Slide 1 of 27: Introduction

Introduction

Introduction
Slide 2 / 28

Meet Your Guide

Henrik Wilhelm Sissener

  • Day Job: Frontend Dev @ NOA Ignite. (React & Svelte are my main tools).
  • Night Job: Illustrator & Game Dev "Dabbler."
  • The Goal: I love building games and drawing, so I figured... why not force the browser to do both?
stylized man in black turtleneck
Introduction
Slide 3 / 28

Why This Talk?

  • I went to Awwwards Conf and saw the future.
  • But the future looked hard. The old tools felt like rocket science.
  • Today, I’m showing you that you don't need a PhD in Math to build cool 3D web experiences.
Loading...
Introduction
Slide 4 / 28

What is 3D?

You Experience It Every Day

  • It's not just video games anymore. It is the Tactile Web.
  • It turns 'viewing' into 'experiencing'.
homer simpson 3d

The Problem

The Problem
Slide 6 / 28

The Old Frontier

The "Unicorn" Requirement

  • The Identity Crisis: To build 3D, you needed to be three people at once: A C++ Developer, a Technical Artist, and a Mathematician.
  • The Math: You didn't just write code; you wrote linear algebra. One wrong matrix calculation and your entire world disappeared.
The Old Frontier - The "Unicorn" Requirement
The Problem
Slide 7 / 28

The Handoff

The "Black Box" vs. The "Glass Box"

The Old Way (The Black Box):

  • The Artifact: You receive a binary file (.glb).
  • The Problem: It’s opaque. You can’t tweak the lighting or fix a texture in code. You have to email the designer and wait for "v2_final_final_final_v2.glb".
  • The Vibe: "Don't touch it, you'll break it."

The New Way (The Glass Box):

  • The Artifact: You receive a React Component.
  • The Solution: It’s transparent. The scene lives in the graph. You can hook into events (onClick) directly from your UI.
  • The Vibe: "It's just another part of the DOM."
Hide the pain

History

History
Slide 9 / 28

1995-2010: The Plugin Era

Please install Flash Player to view this content

  • The Tech: VRML and Flash allowed 3D, but they were heavy, proprietary plugins.
  • The Experience: Slow loading screens, crashing browsers, and security risks.
  • The Verdict: The web wasn't ready. 3D was an isolated island, not part of the page.
1995 - 2010
The Dark Ages
2011 - 2018
The Hard Way
2019 - 2023
The React Era
Now & Beyond
WebGPU & Spline
History
Slide 10 / 28

2011: The WebGL Spark

Native 3D arrived, but it required a Math degree.

  • The Breakthrough: WebGL 1.0 launched, bringing hardware-accelerated 3D directly to the HTML5 canvas—no plugins required.
  • The Problem: It was extremely low-level. Drawing a simple rotating cube required hundreds of lines of imperative code and complex matrix math.
  • The Hero: Three.js emerged to abstract the math, but you still had to manage the render loop manually.
1995 - 2010
The Dark Ages
2011 - 2018
The Hard Way
2019 - 2023
The React Era
Now & Beyond
WebGPU & Spline
History
Slide 11 / 28

2019: The Declarative Revolution

React Three Fiber improves the Developer Experience (DX).

  • The Shift: We stopped writing imperative code (scene.add(mesh)) and started writing components (<Mesh />).
  • The Impact: 3D became just another part of the UI tree. State, events, and props now worked seamlessly with 3D objects.
  • The Result: Millions of React developers suddenly had access to 3D without needing to learn a game engine.
1995 - 2010
The Dark Ages
2011 - 2018
The Hard Way
2019 - 2023
The React Era
Now & Beyond
WebGPU & Spline
History
Slide 12 / 28

Now & Beyond: The Engine Swap

WebGPU and AI are removing the final bottlenecks

The Engine: WebGPU is replacing WebGL. It unlocks Compute Shaders, allowing us to simulate physics and millions of particles directly on the GPU.

The Workflow: Tools like Spline and AI generators allow designers to ship 3D directly to the web, blurring the line between "design" and "code."

The Stat: 100x more objects & 3x - 5x more complex scenes than WebGL. The limit is no longer the browser; it's your imagination.

1995 - 2010
The Dark Ages
2011 - 2018
The Hard Way
2019 - 2023
The React Era
Now & Beyond
WebGPU & Spline

Business Impact

Business
Slide 14 / 28

The Business Case: Sell More

Confidence Drives Conversion

  • The Shopify Stat: Merchants using 3D models see up to a +94% conversion rate.
  • The "Why": It removes doubt. Users don't buy what they can't understand.
  • The SEO Bonus: 3D increases Dwell Time (time on page). Google notices when users stop scrolling to interact, boosting your search ranking.
shut up and take my money
Business
Slide 15 / 28

The Business Case: Return Less

Close the "Imagination Gap"

  • The Problem: The #1 reason for e-commerce returns is "It looked different in real life."
  • The Fix: 3D offers truth. Letting users rotate and inspect the product reduces returns by 40%.
  • The Bottom Line: Stop "catfishing" your customers with carefully staged photos.
The Business Case: Return Less - Close the "Imagination Gap"
Business
Slide 16 / 28

Scale Content

Create assets programmatically

  • The Old Way: Want to show the product in 10 new colors? Schedule a new photoshoot. Edit 100 photos.
  • The 3D Way: Update one texture in the code. Render 1,000 variations instantly.
  • The Result: Infinite marketing assets for zero marginal cost.
stormtroopers marching

Performance

Performance
Slide 18 / 28

Capability: Faster than you think

If it works on Instagram, it works here

  • The Weight: A compressed 3D model is often smaller than a background video (300KB vs 5MB).
  • The Speed: Optimized scenes load in milliseconds, not seconds. No "loading bars" required.
  • The Device: It doesn't need a gaming PC. If your phone can run TikTok, it can run your website.
roadrunner

Why Use 3D?

Why Use 3D
Slide 20 / 28

Reason #1: Stand Out

Be the Unicorn 🦄

  • The Sea of Sameness: Most websites are just different arrangements of rectangles.
  • 3D breaks the grid. It disrupts the scroll.
spidermen
Why Use 3D
Slide 21 / 28

Reason #2: Engagement

People Actually Stay 🎯

  • The Fidget Spinner Effect: Humans are simple creatures. We see a spinny thing, we spin it.
  • Avg Session Time: +300% (3x). Passive scrolling is for zombies; 3D wakes them up.
cartoon frog with psycadelic colors
Why Use 3D
Slide 22 / 28

Reason #3: Better UX

Show, Don't Tell 📦

  • Product configurators: customers see exactly what they're buying.
  • Architecture: walk through spaces before they exist.
  • Data visualization: 3D charts reveal patterns 2D can't show.
Reason #3: Better UX - Show, Don't Tell 📦
Why Use 3D
Slide 23 / 28

Reason #4: It's Actually Accessible Now

No PhD Required 🎓

  • React Three Fiber: Write 3D like you write React components
  • Extensive documentation and community support
  • Templates and examples everywhere
  • The barrier to entry is lower than ever
Reason #4: It's Actually Accessible Now - No PhD Required 🎓
Slide 24 / 28

Responsibility

With Great Power... 🕷️

  • Power Drain: 3D is heavy. Don't drain your user's battery for a simple spinner.
  • Accessibility: Screen readers can't read a WebGL canvas. Always provide HTML fallbacks.
  • Motion Sensitivity: Respect 'prefers-reduced-motion'. Don't make your users sick.
  • Asset Weight: Don't melt their data plan. Compressing a 50MB texture down to 200KB isn't optional; it's survival. Use Draco.
Responsibility - With Great Power... 🕷️

Conclusion

Examples
Slide 26 / 28

Real-World Success Stories

3D in Action

These industry leaders prove that 3D isn't just a gimmick—it's a powerful tool that drives real business results.

Conclusion
Slide 27 / 28

Conclusion

The Future is 3D

  • The barrier to entry has crumbled. The web is gaining a Z-axis.
  • The only question is: What will you build?
gif of a rocket landing
CODE
SYSTEM READY

TECHNICAL

SHOWCASE

Architecture & Performance

Transitioning to the structural implementation details.

Scroll
Loading 3D Scene...