本文创建的天空盒是用六张图片来创建的。笔者会论述两种方法来创建，都是最简单基本的方法，不涉及着色器的使用。
一种是创建一个盒子，然后将图片作为盒子6个面的纹理贴上来创建。
另一种则是简单的将纹理作为场景的背景来创建。
两种方法视觉效果是几乎没区别的，会给人身临其境的效果，感觉身处在这个3维空间里，最明显的区别就在于当你在用鼠标滚轮缩进的时候，天空盒会“原形毕露”，暴露出其盒子的本性，视觉效果原理展现在你的眼前。如图所示：
而作为背景的方法创建的话，则无论你怎么缩进，都不会“原形毕露”。
当然，缩进的设置我们是可以自己调整的，规定缩进的范围，用第一种方法也是可以不暴露出盒子的原型的。
好，接下来我们来看代码部分。
<div id="WebGL-output"></div>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
第一步是引用文件，我们是用Three.js来创建天空盒，所以第一个引用的是three.js这个文件，第二引用的文件是OrbitControls.js，这里面的函数是我们用来操控相机的，你可以通过调用这个文件里的函数在天空盒中实现360°的转换视角来观看，前文所述的你如果要调整缩进的话，也是调用里面的函数。
至于第一行的div，是作为我们three.js的输出对象。
写完引用文件，接下来看下正文代码的结构。
<script>
var scene, camera, renderer；
var container, controls;
init();
animate();
// FUNCTIONS
function init()
{
······
}
function animate()
{
······
}
function update()
{
······
}
function render()
{
······
}
</script>
第一步创建会用到的全局变量
three.js不可缺少的三部分：scene（场景）, camera（相机）, renderer（渲染器)；
至于另外两个变量我们在代码中去理解。笔者在此就不多述了。
核心部分是init()函数，先创立三维场景基本要素：
// 创建场景
scene = new THREE.Scene();
// 定义透视相机的四个参数变量
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
//创建相机
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(0,150,400);//将相机的位置摆放在（0，150，400）的位置。这里位置你可以更改以下，放在（0，0，400）也是可以的
camera.lookAt(scene.position);//让相机对着场景*
//将相机加入场景之中
scene.add(camera); //设置渲染器
renderer = new THREE.WebGLRenderer( {antialias:true} );//设置为抗锯齿
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);//设置渲染器渲染的场景大小 container = document.getElementById( 'WebGL-output' );
container.appendChild( renderer.domElement );
/*renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在id=WebGL-output的div下面，这样渲染的结果就能够在页面中显示了。*/ //再设置相机控件，这行代码能让我们360°的旋转相机
controls = new THREE.OrbitControls( camera, renderer.domElement );
接着是创建天空盒的代码：
var path = "../examples/textures/cube/Park3Med/";//设置路径
var directions = ["px", "nx", "py", "ny", "pz", "nz"];//获取对象
var format = ".jpg";//格式
//创建盒子，并设置盒子的大小为( 5000, 5000, 5000 )
var skyGeometry = new THREE.BoxGeometry( 5000, 5000, 5000 );
//设置盒子材质
var materialArray = [];
for (var i = 0; i < 6; i++)
materialArray.push( new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( path + directions[i] + format ),//将图片纹理贴上
side: THREE.BackSide/*镜像翻转，如果设置镜像翻转，那么只会看到黑漆漆的一片，因为你身处在盒子的内部，所以一定要设置镜像翻转。*/
}));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );//创建一个完整的天空盒，填入几何模型和材质的参数
scene.add( skyBox );//在场景中加入天空盒
注意directions[]数组中的图片顺序是有要求而不是随意的！否则加载的效果会错乱。这张图片会帮助你更好的理解：
剩下的尾巴部分：
function animate()
{
requestAnimationFrame( animate );//渲染循环
render();
update();
} function update()
{
controls.update();//实时更新相机操作
} function render()
{
renderer.render( scene, camera );//实时渲染
}
另一种作为背景的方法的代码如下:
var path = "textures/cube/Park3Med/"; //设置路径
var format = '.jpg'; //设定格式
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
var textureCube = new THREE.CubeTextureLoader().load( urls ); scene.background = textureCube; //作为背景贴图
还有另一种更简洁的写法是：
scene.background = new THREE.CubeTextureLoader()
.setPath( 'textures/cube/Park3Med/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
两种方法只需要更换这部分代码即可。
以下给出全部代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Skybox</title>
<style>
body {
background:#777;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
</style>
</head>
<body> <div id="WebGL-output"></div>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script> <script> var scene, camera, renderer;
var container, controls; init();
animate(); // FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.set(0,150,400);
camera.lookAt(scene.position); scene.add(camera); // RENDERER renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); container = document.getElementById( 'output' );
container.appendChild( renderer.domElement ); controls = new THREE.OrbitControls( camera, renderer.domElement ); // LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
// FLOOR var path = "../examples/textures/cube/Park3Med/";
var directions = ["px", "nx", "py", "ny", "pz", "nz"];
var format = ".jpg";
var skyGeometry = new THREE.BoxGeometry( 5000, 5000, 5000 ); var materialArray = [];
for (var i = 0; i < 6; i++)
materialArray.push( new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( path + directions[i] + format ),
side: THREE.BackSide
}));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
//skyBox.scale.x=-1;也是镜像翻转，与上面的side一个效果
scene.add( skyBox ); } function animate()
{
requestAnimationFrame( animate );
render();
update();
} function update()
{
controls.update();
} function render()
{
renderer.render( scene, camera );
} </script>
</body>
</html>
以上有一段代码是灯光的设置加入，这里可以注释掉，不影响天空盒的效果。但是如果你要在天空盒中加入物体，则需要设置灯光，否则加入场景的物体将会是黑色的。
以上就是笔者的一些见解，若有不对的对方，欢迎指正。