DevLog 250413 – Arynwood 3D Gallery Setup

Began building a 3D gallery using Three.js and Vite, with plans for glowing doors and textured artwork. Initial setup successful, though deployment to Netlify needs debugging.

Project Goal

Create a 3D gallery rendered with Three.js, featuring lavender floors, charcoal walls, and immersive orbit viewer controls. Deployment is set to arynwood.com/gallery3d.

Progress So Far

• Initialized Vite project in main/rainkeep/public/gallery3d
• Installed three via npm install three
• Swapped CDN imports for ES module imports
• Set up OrbitControls with drag and zoom working
• Confirmed dev server works at localhost:5173

Vite Config for Deployment

To serve correctly at /gallery3d/ on Netlify, set base path in vite.config.js:

export default {
  base: '/gallery3d/',
};

Deployment Issue

Deployed build shows a white screen. Likely issue is path resolution mismatch between local dev and Netlify environment. Investigating base URL misalignment.

Steps to Fix

1. Ensure vite.config.js lives inside gallery3d/
2. Run npm run build
3. Verify that dist/index.html uses /gallery3d/ in its script paths
4. Set Netlify’s publish directory to dist
5. For local testing, switch base to './' and run serve dist

Pausing Point

The 3D gallery renders fine in dev mode. Deployment bug remains. Pausing to spend time with family.

Next Features to Build

• Model 3D doors with glow effects
• Design textured canvas artwork on planes
• Create transitions between gallery rooms or camera perspectives
• Write markdown version of full setup and troubleshooting

View gallery at: arynwood.com/gallery3d

Back to Arynwood Blog