Glowing backdrops

Put your product inside a glowing dome or on a fading floor when it has no room to stand in. In the render the glow is real light on your product. To render with your own HDRI and lights, see Environment & lighting.

import { createEnvironment } from '@oeave/bakery3/environments';

const environment = createEnvironment({
  shape: 'groundSphere',
  shader: 'horizon',
  mode: 'dark', // or 'colorful', or 'light'
});
scene.add(environment);
product.position.y = 0; // the product stands at the origin, on the ground

In the render the dome's colors show in your product's reflections, and the ground takes the product's shadow. The viewport can only show the dome glowing. An environment has no textures to download or upload.

environmentSpecOf() reads back the options a group was built with.

import { environmentSpecOf } from '@oeave/bakery3/environments';

environmentSpecOf(environment);
// {
//   shape: 'groundSphere', shader: 'horizon', mode: 'dark',
//   palette: ['#06070d', '#33d1ff', '#ff2d95'],
//   intensity: 3, radius: 12, seed: 1, time: 0,
// }

Pick a shape

`shape`	What you get
`sphere`	A dome around the origin. The product floats, and there is no ground for a shadow to land on.
`groundSphere`	The same dome with a flat ground at `y = 0`. The ground shows the product's shadow and the dome's colored light.
`floor`	A disc at `y = 0` that fades out toward its rim, so its edge never shows. It gives off no light, so light the scene yourself.

Pick a shader

Any shape works with any shader.

`shader`	On a dome	On a `floor`
`gradient`	The palette as a vertical ramp, bottom to top.	The ramp runs from the product out to the rim.
`bands`	Soft horizontal bands of light, dimmer below the horizon so the light comes from above.	Rings around the product, fading toward the rim.
`blobs`	Three or four soft blobs of light above the horizon, placed by `seed`. Subtle on purpose.	Soft patches of color around the product.
`horizon`	A dark dome, a thin bright ring just above the horizon and a soft glow to one side.	A bright ring around the product and a patch to one side.

The horizon ring is what shows up as a horizon line in a glossy product.

Set the mode, colors and brightness

Option	Default	What it does
`mode`	`'dark'`	`dark` is an ink dome with cyan and magenta light over a dark, glossy ground. `colorful` is the same ground under more colored light. `light` is a pale dome with soft color over a warm, matte ground.
`palette`	from the mode	Two to four CSS hex colors, darkest first. `environmentSpecOf()` shows the ones in use.
`intensity`	from the mode	How strongly the dome glows. At `1` it emits what an HDRI pixel of value 1 would.
`radius`	`12`	Dome or disc radius in meters.
`seed`	`1`	Places the blobs and picks the side of the `horizon` glow.
`time`	`0`	A phase in seconds. It turns the bands and rotates the blobs.
`fill`	`false`	Adds a light for the viewport only. See below.

A dark dome glows harder by default than a pale one, because its few bright patches have to light the whole product. intensity does nothing on a floor.

An environment does not animate. time is fixed when you build the environment, so build it again to change it.

See your product in the viewport

In the render the dome lights your product. In the Three.js viewport it cannot, so a product under a dark dome previews almost black. Pass fill: true and the environment adds a soft hemisphere light in the dome's colors.

const environment = createEnvironment({
  shape: 'groundSphere',
  shader: 'horizon',
  fill: true,
});
scene.add(environment);

The fill is never sent to the renderer, so it cannot change your render. It follows intensity: a dome turned down to a third fills a third as hard.