Three.js From Zero · Article s12-01
S12-01 Photo Mode as a System
Skip to demo
Season 12 · S12-01 · Specialized Production Patterns
Photo Mode as a System — tiled renders, watermarking, and safe controls
A screenshot button is a feature. Photo mode is a system: render sizing, watermark handling, UI lockout, and repeatable output contracts for merch teams.
infrastructurecapturecommerce
1. Why this article exists
Season 11 made screenshots a capability. This article turns them into an intentional subsystem you can pitch to any merchant with campaign or catalog needs.
2. What we are building in the demo
- A preview stage that changes aspect ratio and capture framing.
- A watermark layer that can be faded, positioned, or removed for internal QA.
- A capture-safe mode that suppresses movement and noisy UI before the frame is written.
3. Live demo
The demo below is a compact study model, not a full production system. The goal is to make the article’s mental model tactile: what changes, what matters, and what you would keep when the codebase graduates into a real project.
booting...
Season 12 is deliberately less single-vertical than Season 11. The throughline is still applied production: every demo is framed as a pattern you could reuse in paid work.
4. Implementation sketch
function captureFrame({ width, height, watermark }) {
lockControls(true);
renderer.setSize(width, height, false);
drawWatermark(watermark);
renderer.render(scene, camera);
return renderer.domElement.toDataURL('image/png');
}5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- Never rely on “whatever the viewport was.” Define target output sizes.
- Lock motion before capture or marketing gets inconsistent crops.
- Treat watermarking as a layer, not a baked-in texture, so internal and external exports can differ.
6. Takeaways
- Photo mode deserves the same product thinking as AR or analytics.
- Fixed output contracts prevent “can you render one more size?” churn.
- The best capture tooling reduces manual merch-team work, not just dev curiosity.