Gallery 3D – Personalized Placement Pipeline

The current art wall layout is functional but too formulaic. This next sprint focuses on giving each painting its own space, light, and intention.

Goals

• Manually assign artwork coordinates (no loops)
• Allow individual spotlight tuning per piece
• Increase painting size for better visibility
• Refactor orbit controls for better mobile UX

Step 1: Individual Artwork Placement

Instead of the loop-based system, we’ll define each piece with an addArtwork call and explicit coordinates:

// Example layout with larger size
addArtwork(1, -18, 5.2, -24.5, 0);
addArtwork(2,  0,  5.2, -24.5, 0);
addArtwork(3,  18, 5.2, -24.5, 0);
addArtwork(4, -18, 5.2,  24.5, Math.PI);

This gives you full curatorial control over layout spacing, aesthetic flow, and wall balance.

Step 2: Lighting Per Painting

With fixed positions, each artwork can have a dedicated PointLight or SpotLight tuned to enhance its color:

const light = new THREE.PointLight('#ffffff', 5, 10);
light.position.set(-18, 6.5, -24);
scene.add(light);

You can color-tune lights per mood:

new THREE.PointLight('#b48eff', 3, 8); // ethereal violet
new THREE.PointLight('#ffdcdc', 2, 6); // warm candlelight

Step 3: Adjust Artwork Size

Current size: 3.5w x 5h. Consider trying:

const canvasWidth = 4.5;
const canvasHeight = 6.2;

This helps especially on mobile, where the smaller scale isn’t readable.

Step 4: Orbit Control Improvements

The current orbit behavior is too aggressive for mobile. Try these more subtle settings:

controls.enableZoom = true;
controls.zoomSpeed = 0.25;
controls.rotateSpeed = 0.3;
controls.panSpeed = 0.4;
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.minDistance = 5;
controls.maxDistance = 30;

You can also add conditionals to detect touchscreens and limit rotation axes if needed:

if ('ontouchstart' in window) {
  controls.maxPolarAngle = Math.PI / 3;
  controls.enablePan = false;
}

Optional: Touch Navigation Overlay

A simple fix would be a floating button panel with:

• Zoom in/out
• Rotate left/right
• Reset view

We’ll explore adding this UI layer later using plain HTML buttons and event hooks on the camera.

Next Tasks

1. Remove math loop placement
2. Create 10–12 addArtwork lines by hand with notes
3. Adjust orbit settings and test on iPhone
4. Refactor lights per object

Visit the current build: arynwood.com/gallery3d

Back to index: Arynwood Blog