Gallery layout
Glass Panes
Pictures sealed behind thick panes of physical glass that refract the room and are lit by the scene; the front pane steps forward, the others stand back dimmer. Use for architecture, luxury, product and corporate showcases.
Settings and defaults
shared
- Layout
- Row
- Aspect
- 1.4
- Thickness
- 0.09
- Spacing
- 1.25
- Visible
- 2.6
- Shape
- 1
- Stiffness
- 34
- Damping
- 9
- Roughness
- 0.06
- Ior
- 1.5
- Intensity
- 1
- Opacity
- 1
- Throwing
- 0.12
- Tint
- #dfe9ff
cursor
- Pointer mode
- Off
- Navigation
- Click
- Pointer strength
- 1
- Pointer radius
- 1.5
- Pointer color
- #ffd9a6
inactive
- Depth
- 0.7
- Dim
- 0.3
active
- Focus lift
- 0.35
pictures
- Autoplay
- 0
Glass Panes seals every picture behind a thick slab of real glass. The glass refracts the room behind it, catches the scene's lights and carries a slight tint, so the pictures read as objects in a showroom rather than flat images.
How it works
The panes stand in a row that slides on a damped spring. The pane at the front steps forward toward the viewer; the others stand back in depth and are dimmer. Everything is lit by the lights of your scene, so moving or colouring the lights changes how the glass shines. With Pointer mode set to Tilt, the panes near the cursor lean toward it.
Settings
- Thickness: how thick the glass slab is.
- Roughness: frosting. Low is clear glass, higher frosts the picture behind it.
- Ior: the index of refraction, how strongly the glass bends what is behind it.
- Tint: the colour of the glass.
- Focus lift: how far the front pane steps forward.
- Depth and Dim: how far back and how dark the other panes sit.
- Layout: Row by default, or Wave, Ring, Helix, Tunnel, Stack, Fan or Constellation.
Use it for
Architecture and interiors, luxury goods, product lines and corporate showcases. The look depends on what the glass can refract, so give the scene an HDR environment or a few lights. For glass on any object, see the glass materials.
Code and API
Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.
More gallery layouts
Basic Carousel
A coverflow carousel of framed pictures on a damped scroll with drag, throw and snap, a lifted centre frame and a soft floor reflection; the cursor tilts or lifts the frames. Use for portfolios, product lines and photo sets.
Engraving
Pictures drawn as banknote engraving, fine parallel lines bent and widened by the picture’s tone: inactive ones are a faint grey hatch, the active one thickens into full colour behind a soft wave; the cursor turns the hatching under it. Use for luxury, finance, heritage and editorial showcases.
Halo
Scene-lit prints on a tilted ring; the picture that comes round to the front steps out toward the viewer, grows and comes to full colour while the others ride the ring faded and grey. Use for brand rings, collections and hero rotations.
Contour Lines
Pictures drawn as the contour lines of their own brightness, like a topographic map: inactive ones are a few thin grey lines, the active one fills in as a soft wave thickens the lines into the solid picture; the cursor lifts the contours into relief. Use for architecture, data and graphic showcases.
Depth Layers
Pictures split by brightness into thin sheets floating in depth: inactive ones are collapsed into one faint grey sheet, the active one opens into depth in full colour and its sheets slide past each other with real parallax. Use for editorial, music and dreamy showcases.
Flow Lines
Pictures as fine lines flowing like water around their own forms: inactive ones are thin grey dashed lines drifting, the active one closes the dashes and thickens the lines into the picture in full colour behind a soft wave; the cursor parts the lines. Use for wellness, nature, music and calm showcases.
Works well with
Advanced
Five advanced 3D materials: a mirror floor, refraction, see-through transmission glass, and two surfaces that distort or wobble the shape in motion.
MaterialDiamond
Brilliant diamond-like material with high refraction and sparkle, perfect for jewelry and gems
GlassGlass
Ten glass presets for 3D scenes: clear, frosted, tinted, smoky, stained, ice, water, amber and gem-like glass for any shape, model or 3D text.
MaterialPhysical Material
The most complete physically based 3D material: clearcoat, transmission, sheen and iridescence for car paint, glass, velvet and bubbles.
BasicReflector
A reflective surface for floors and stages: mirrors the scene above it, with blur, strength and depth fade controls.
AdvancedRefraction
A refraction material for gem-like objects: strong light bending set by IOR, with colored fringes from Aberration Strength.
Advanced