DevLog 250415 – The Long Road to gallery3d/

Today marks a breakthrough. My 3D gallery is live at arynwood.com/gallery3d — and it works. Finally.

The Original Plan

I started with a simple goal:
Render a 3D scene using Three.js and deploy it via Vite.

I built the scene, got npm run dev working. It looked perfect locally.

But the moment I ran npm run build and pushed it live?
White screen.
Uncaught TypeError: Failed to resolve module specifier "three".

The Problems

Problem 1: "three" module couldn't resolve

• Browsers don’t understand bare module specifiers like 'three'
• Vite handles them internally — but the built HTML points to hashed JS files, not readable paths

Problem 2: JS file 404

• Even after building, the script at /gallery3d/assets/index-XYZ.js was missing
• Deployment was misaligned with Vite's expected folder structure

Problem 3: CSP blocked everything

• The Content Security Policy (CSP) blocked inline scripts and any JS using eval() or new Function()
• This broke OrbitControls and parts of Three.js when using the wrong CDN

Problem 4: CDN quirks

• jsDelivr: didn’t rewrite modules properly (caused CSP rejections)
• Skypack: didn't export OrbitControls as expected — broke at runtime

The Fix

I ditched the bundler.

Instead of fighting Vite, I:

1. Created a simple index.html with <script type="module">
2. Used main.js with ES module imports directly from CDN

import * as THREE from 'https://esm.sh/three@0.158.0';
import { OrbitControls } from 'https://esm.sh/three@0.158.0/examples/jsm/controls/OrbitControls.js';

3. Ensured CSP rules allowed loading from https://esm.sh
4. Moved everything into a single, deployable /gallery3d/ folder

What Worked

• esm.sh is fast, modern, and CSP-safe
• No build tools needed — just drop the folder into Netlify
• Works in all major browsers
• Fully modular with clean source separation

Lessons Learned

• Don’t fight your tooling if you can replace it
• CDN modules are viable — if you know where to get the right version
• CSP rules are strict, but with the right config, totally workable
• Always test locally with npx serve before deploying

Next Steps

• Add a terminal-style overlay or interactive UI
• Drop in 3D models or artwork planes
• Use this layout as a base for NFT galleries and Web3 spaces

Built under moonlight, debugged through fire.

Here's a link to the live version: arynwood.com/gallery3d

Back to Arynwood Blog