用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 = 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>

以上有一段代码是灯光的设置加入，这里可以注释掉，不影响天空盒的效果。但是如果你要在天空盒中加入物体，则需要设置灯光，否则加入场景的物体将会是黑色的。
以上就是笔者的一些见解，若有不对的对方，欢迎指正。