WebGL中添加天空盒的两种方法

天空盒 的添加可以让模型所在的场景非常漂亮，而其原理也是非常简单的，相信看完下面代码就可以明白了。

说到天空盒的两种方法，倒不如说是两种写法，分别用了纹理加载的两个方法：loadTexture和loadTextureCube。

特别注意：图片的顺序

【方法一】

        var imagePrefix = "images/";

        var directions = ["posx", "negx", "posy", "negy", "posz", "negz"];

        var imageSuffix = ".jpg";

        var skyGeometry = new THREE.CubeGeometry(80000, 40000, 80000);

 

        var materialArray = [];

        for (var i = 0; i < 6; i++)

            materialArray.push(new THREE.MeshBasicMaterial({

                map: THREE.ImageUtils.loadTexture(imagePrefix + directions[i] + imageSuffix),

                side: THREE.BackSide

            }));

        var skyMaterial = new THREE.MeshFaceMaterial(materialArray);

        var skyBox = new THREE.Mesh(skyGeometry, skyMaterial);

        scene.add(skyBox);

【方法二】

var r = "textures/cloud/";

    var urls = [r + "posx.jpg", r + "negx.jpg",

                 r + "posy.jpg", r + "negy.jpg",

                 r + "posz.jpg", r + "negz.jpg"];

 

    textureCube = THREE.ImageUtils.loadTextureCube(urls);        //定义方盒纹理路径

 

    //====着色器===

    var shader = THREE.ShaderLib["cube"];

    shader.uniforms["tCube"].value = textureCube;

 

    var material = new THREE.ShaderMaterial({

        fragmentShader: shader.fragmentShader,

        vertexShader: shader.vertexShader,

        uniforms: shader.uniforms,

        depthWrite: false,

        side: THREE.BackSide

    }),

 

    mesh = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), material);      //创建方盒子，并添加进方盒场景

    sceneCube.add(mesh);