How to define a scene background with gradients?

Questions
1

Is it possible to define a background with gradients for scene.background?
I think not, or?

Then, is it possible to define an background-image for scene.background?

2

Depends on what you want to achieve in the end.

You can set a solid color. Or a texture (with gradient). Or a videotexture. Or a cube texture. Have a look at the documentation.
You can instantiate THREE.WebGLRenderer() with the .alpha property set to true. And then use .setClearColor(0x000000, 0), thus you can use html elements as you can see through the backgound of the scene.
Or, for the background, you can use a big box or a sphere with gradient made with shaders.

2 Likes
3

Also see: How to set image as background for gltf format?

1 Like
4

Using the alpha/transparent option you could also go with a CSS background if it’s an option for you.

2 Likes
5

I like https://github.com/mattdesl/three-vignette-background for a grainy vignette. grainScale must be set to 0 on iOS though.

3 Likes
6

I create a simple Three JS gltf/glb template with a gradient background and added grain. You can download it on Github.

1 Like
7

Was searching help on this topic and found the following example from the Oimo.js library which literally inserts an IcosahedronGeometry with a gradient texture as background:

Screen Shot 2021-02-23 at 20.35.22 PM
Screen Shot 2021-02-23 at 20.35.22 PM1792×1324 183 KB

http://lo-th.github.io/Oimo.js/examples/test_basic.html