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

以上有一段代碼是燈光的設置加入，這里可以注釋掉，不影響天空盒的效果。但是如果你要在天空盒中加入物體，則需要設置燈光，否則加入場景的物體將會是黑色的。
以上就是筆者的一些見解，若有不對的對方，歡迎指正。