# how to use threejs to achieve a effect of sky box?

**URL:** <https://discourse.threejs.org/t/how-to-use-threejs-to-achieve-a-effect-of-sky-box/54467>\
**Category:** Questions\
**Tags:** textures, materials, geometry\
**Created:** [July 31, 2023, 6:34pm UTC](https://discourse.threejs.org/t/how-to-use-threejs-to-achieve-a-effect-of-sky-box/54467 "2023-07-31T18:34:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![chao\_chen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chao_chen/32/38589_2.png) [@chao\_chen](https://discourse.threejs.org/u/chao_chen)\
**Post date:** [July 31, 2023, 6:34pm UTC](https://discourse.threejs.org/t/how-to-use-threejs-to-achieve-a-effect-of-sky-box/54467/1 "2023-07-31T18:34:58Z")

</div>

I get a [sky box effect of webgl](https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-skybox.html),and want to achieve that with threejs ,but until now ，I do not get it，and I debug the code of threejs ，I found the effect of webgl use texImage2D to do TEXTURE\_CUBE，threejs use texStorage2D and texSubImage2D to do that。when use the “ fragColor = texture(u\_skybox, normalize( t.xyz / t.w));” to get the color，color is error and is not wanted，so I want to ask a question，How to get effect with threejs，just like webgl example([WebGL 天空盒](https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-skybox.html))。and the different between texImage2D and texStorage2D 、 texSubImage2D。thank you。

```javascript
 camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
 camera.position.set(Math.cos(.1), 0, Math.sin( .1));
 camera.lookAt(0,0,0)
 scene = new THREE.Scene();
 renderer = new THREE.WebGLRenderer();
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
 const geometry = new THREE.PlaneGeometry(2, 2);
 const loader = new THREE.CubeTextureLoader();
 loader.setPath( 'examples/textures/cube/Bridge2/' );
 loader.load(['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg'] ,
     function (textureCube) {
            shader = {
                vertexShader:`
                   in vec3 position;
                   out vec4 v_position;
                   void main() {
                   v_position = vec4(position,0.0);
                   gl_Position = vec4(position, 1.0);
                   gl_Position.z = 1.0;
            }`,
            fragmentShader: `
                precision highp float;
                precision highp int;
                uniform samplerCube u_skybox;
                uniform mat4 u_viewDirectionProjectionInverse;
                out highp vec4 fragColor;
                in vec4 v_position;
                void main() {
                    vec4 t = u_viewDirectionProjectionInverse * v_position;
                     fragColor = texture(u_skybox, normalize( t.xyz / t.w));
                }`,
                uniforms: {
                    "u_skybox": {value: textureCube},
                },
            }
           material = new THREE.RawShaderMaterial({
           // material = new THREE.ShaderMaterial({
                name: 'SkyShader',
                fragmentShader: shader.fragmentShader,
                vertexShader: shader.vertexShader,
                uniforms: shader.uniforms,
                side: THREE.FrontSide,
          });
          material.glslVersion =THREE.GLSL3;
         const plane = new THREE.Mesh(geometry, material);
         scene.add(plane);
        camera.updateWorldMatrix();
        const pj = new THREE.Matrix4()
        pj.copy(camera.projectionMatrix)
        const ps = new THREE.Matrix4()
        ps.copy(camera.matrixWorldInverse)
        ps[12] = 0;
        ps[13] = 0;
        ps[14] = 0;
        pj.multiply(ps);
        shader.uniforms.u_viewDirectionProjectionInverse = {value: pj}
});

```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 1, 2023, 4:15am UTC](https://discourse.threejs.org/t/how-to-use-threejs-to-achieve-a-effect-of-sky-box/54467/2 "2023-08-01T04:15:12Z")

</div>

You don’t need a custom shader though. You can just do the following (as per [docs](https://threejs.org/docs/index.html?q=cube#api/en/textures/CubeTexture)):

```js
const loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/cube/Bridge2/' );

const textureCube = loader.load([
  'px.png', 'nx.png',
  'py.png', 'ny.png',
  'pz.png', 'nz.png'
]);

scene.background = textureCube;

```

You can also adjust which way the sphere is bending with `texture.mapping`:

```js
THREE.CubeReflectionMapping // NOTE Bend "outwards"
THREE.CubeRefractionMapping // NOTE Bend "inwards"

THREE.EquirectangularReflectionMapping // NOTE Same but for equirectangular images
THREE.EquirectangularRefractionMapping 

```

---

<div class="post-metadata">

**Author:** ![chao\_chen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chao_chen/32/38589_2.png) [@chao\_chen](https://discourse.threejs.org/u/chao_chen)\
**Post date:** [August 1, 2023, 11:51am UTC](https://discourse.threejs.org/t/how-to-use-threejs-to-achieve-a-effect-of-sky-box/54467/3 "2023-08-01T11:51:50Z")

</div>

it is very glad to have your reply，“scene.background = textureCube;”will create a cube on threejs render and I want to use a plane to instead that ,the cube maybe be limited by size. now I take care of the reason more why i can not use threejs to achieve effect of weblg demo.hope to get your reply again。