# Sky Shader example

**URL:** <https://discourse.threejs.org/t/sky-shader-example/13653>\
**Category:** Questions\
**Tags:** examples, shaders\
**Created:** [March 20, 2020, 3:00pm UTC](https://discourse.threejs.org/t/sky-shader-example/13653 "2020-03-20T15:00:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [March 20, 2020, 3:00pm UTC](https://discourse.threejs.org/t/sky-shader-example/13653/1 "2020-03-20T15:00:38Z")

</div>

Hey, im trying to implement the [Sky Shader example](https://threejs.org/examples/?q=sky#webgl_shaders_sky), but I get a black screen. This is what I implement. I dont need a sun, or is it necessary? I set my camera.far very high

```
this.sky = new Sky()
this.sky.scale.setScalar(100000)
this.scene.add(this.sky)

var uniforms = this.sky.material.uniforms;
uniforms["turbidity"].value = 10
uniforms["rayleigh"].value = 2
uniforms["mieCoefficient"].value = .005
uniforms["mieDirectionalG"].value = .8
uniforms["luminance"].value = 1
```

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [March 20, 2020, 3:55pm UTC](https://discourse.threejs.org/t/sky-shader-example/13653/2 "2020-03-20T15:55:26Z")

</div>

Yes a sun is necessary.

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [March 20, 2020, 4:22pm UTC](https://discourse.threejs.org/t/sky-shader-example/13653/3 "2020-03-20T16:22:23Z")

</div>

By sun do you mean directional light? It’s all happening in a shader and the example does not use one so that shouldn’t be needed.

@Fluqz you’ll have to post more of your code or a jsfiddle for people to help with why it’s not displaying

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [March 20, 2020, 4:25pm UTC](https://discourse.threejs.org/t/sky-shader-example/13653/4 "2020-03-20T16:25:58Z")

</div>

Just a Vector3 not a directional light, the uniform `sunPosition` which is by default `0,0,0`.

---

<div class="post-metadata">

**Author:** ![Shane-oo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shane-oo/32/38695_2.png) [@Shane-oo](https://discourse.threejs.org/u/Shane-oo)\
**Post date:** [December 22, 2023, 7:01am UTC](https://discourse.threejs.org/t/sky-shader-example/13653/6 "2023-12-22T07:01:32Z")

</div>

For anyone still confused by Fyrestar’s solution here is the code answer with the sun vector

```javascript
private createSky(): Sky {
    const sky = new Sky();
    sky.scale.setScalar( 450000 );
    sky.material.uniforms['turbidity'].value = 10;
    sky.material.uniforms['rayleigh'].value = 3;
    sky.material.uniforms['mieCoefficient'].value = 0.08;
    sky.material.uniforms['mieDirectionalG'].value = 0.8;

    const sun = new Vector3(1,10,0);
    sky.material.uniforms['sunPosition'].value.copy( sun );

    sky.visible = true;
    return sky;
  }

```