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