用Three.js创建一个简易的天空盒

本文创建的天空盒是用六张图片来创建的。笔者会论述两种方法来创建，都是最简单基本的方法，不涉及着色器的使用。
一种是创建一个盒子，然后将图片作为盒子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 &#