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