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

Questions
, ,
1

I get a sky box effect of webgl,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 天空盒)。and the different between texImage2D and texStorage2D 、 texSubImage2D。thank you。

 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}
});
2

You don’t need a custom shader though. You can just do the following (as per docs):

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:

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

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

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。