Building Interactive Websites with Three.js and Astro

The web doesn’t have to be flat. With Three.js and modern frameworks like Astro, you can build immersive 3D experiences that load fast, rank well in search engines, and captivate visitors from the first interaction.

The Challenge

Most Three.js websites suffer from two problems: they’re slow to load, and search engines can’t read them. The 3D canvas is essentially invisible to crawlers — all they see is a blank <canvas> element.

Our Approach: Island Architecture

Astro’s island architecture solves this elegantly. The page is static HTML first — headings, paragraphs, links, structured data — all the content search engines need. Then, the Three.js scene hydrates on top as a React island, only loading when the browser is ready.

// The 3D scene is a React component that hydrates client-side
<IsometricScene client:visible />

The client:visible directive means the 3D scene only loads when it scrolls into view. Before that, visitors see a lightweight placeholder, and crawlers see the full HTML content.

Performance Results

With this approach, we achieved:

• 98 Lighthouse performance score on desktop
• Full SEO indexability — every page is static HTML
• < 3 second load time on 3G connections (the 3D scene loads progressively)
• Zero layout shift — the canvas reserves space immediately

Key Takeaways

1. Always have a fallback. Not every device can run WebGL. Serve a static alternative.
2. Lazy load your 3D. Use intersection observers or client:visible to defer heavy assets.
3. Keep your scene simple. Low-poly aesthetics aren’t just trendy — they’re performant.
4. Put content in HTML, not in the canvas. Search engines read HTML, not Three.js text meshes.

The future of the web is interactive, but it doesn’t have to come at the cost of accessibility or performance.