gradient clearColor in threejs

Question

I can get a solid clearColor in threejs, but is there a way to achieve a gradient clearColor. Or some similar way to achieve a little more depth in my sky, maybe with lights?

Here's my relevant code:

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor( 0x3dc800 );

var light = new THREE.HemisphereLight( 0xffffff, 0xeeeeee, 0.75 );
  light.position.set( 0.5, 1, 0.75 );
  scene.add( light );

scene.fog = new THREE.Fog( 0x4ff904, 0, 750 );

enter image description here

take a look at http://threejs.org/examples/#webgl_shaders_sky — gaitat, Jan 25 '15 at 00:54
wow - that's beautiful - I was going for something a bit more retro but I'll see if I can work with that. Thanks for the link. — mheavers, Jan 25 '15 at 03:29

score 3 · Accepted Answer · answered May 12 '16 at 22:35

I ran across this codepen:

http://codepen.io/billimarie/pen/mJLeBY

I take no credit, but it answers the question perfectly.

The relevant chunks are:

renderer = new THREE.CanvasRenderer( { alpha: true }); // gradient

withe the css:

body {
            background-color: #1A8FCF;
            margin: 0px;
            overflow: hidden;
            background-image: -webkit-gradient(#1A8FCF,#D1236A,#1A8FCF);
            /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
            background-image: -webkit-linear-gradient(#1A8FCF,#D1236A,#1A8FCF);
            /* Firefox 3.6 - 15 */
            background-image: -moz-linear-gradient(#1A8FCF,#D1236A,#1A8FCF);
            /* Opera 11.1 - 12 */
            background-image: -o-linear-gradient(#1A8FCF,#D1236A,#1A8FCF);
            /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
            background-image: linear-gradient(#1A8FCF,#D1236A,#1A8FCF);
        }

**Note, my own colors...

Unfortunately they moved `CanvasRenderer` to `/examples/js/renderers/CanvasRenderer.js`, so you also need that in the latest releases. — Ákos Kovács, Mar 19 '17 at 15:54

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

See Transparent background with three.js for transparent background rendering and then you can apply CSS gradients http://www.w3schools.com/Css/css3_gradients.asp however it won't move with your scene unless you get really tricky.

edited May 23 '17 at 12:13

Community

1
1

answered Jan 26 '15 at 20:03

Flux

626
1
6
15

gradient clearColor in threejs

2 Answers2