Gallery Lighting and Artwork Expansion

Today's update focuses on adding depth, precision, and atmosphere to the 3D gallery through improved lighting and a wrapped box display method for artwork using Three.js.

With the core gallery now functioning, I added perimeter lighting on all four walls to simulate gallery spotlights. The exposure was turned up using ACESFilmicToneMapping for richer, more cinematic lighting contrast.

Scene Setup and Tone Mapping

The renderer is now tuned for high dynamic range output, simulating photorealism more effectively:

renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 4.0;

Lighting Architecture

I installed wall-mounted point lights to flood the gallery with indirect bounce and fill.

• Top fill: PointLight at the ceiling
• Wall spotlights: 3 per wall (left, right, front, back)
• Central spotlight: High-intensity center highlight
• Window accent: Soft #b48eff moon glow

This setup added a vibrant gallery feel without the harshness of shadows.

Artwork Wrapping with BoxGeometry

Each artwork is now wrapped in a shallow box to simulate framed canvas depth. I used BoxGeometry and assigned the texture only to the front face, while the sides and back are rendered in black:

new THREE.BoxGeometry(width, height, depth)
// front face: artwork texture
// sides and back: dark matte #111

This gives every piece a sense of realism and dimension instead of floating planes.

Dynamic Placement Script

The walls are filled with up to 40 artworks using a script that increments texture URLs and wraps them on each wall. Skips the window cutout dynamically.

function addArtwork(i, x, y, z, rotationY) {
  const url = `https://.../Untitled_Artwork%20${i}.png`;
  // Loads wrapped mesh
  // Auto-rotates per wall
}

This gives me a scalable way to hang a large volume of pieces while maintaining symmetry and balance.

Next Steps

• Implement floor reflections or soft shadows
• Improve camera auto-navigation or guided tour logic
• Continue optimizing texture resolution vs. performance

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

View source on GitHub.