three.js为正方体6个面加载不同纹理（and天空图的制作）

实现功能

1.加载天空图。
2.OrbitControls视角控制器。
3.正方体6个面加载不同纹理。

实现效果

完整代码请看最底下，接下来进行分段功能介绍

功能代码解释

1.加载天空图
第一步：创建天空图纹理。先将全景图的6个面文件路径加载到一个数组，然后调用loadTextureCube（不是loadTexture）方法加载纹理组合。

    function createCubeMap() {
   

        var path = "../assets/textures/cubemap/parliament/";
        var format = '.jpg';
        var urls = [
            path + 'posx' + format, path + 'negx' + format,
            path + 'posy' + format, path + 'negy' + format,
            path + 'posz' + format, path + 'negz' + format
        ];//加载6张图

        var textureCube = THREE.ImageUtils.loadTextureCube(urls);//加载纹理
        return textureCube;//函数返回此纹理
    }

第二步：创建天空背景图。

       var textureCube = createCubeMap();//调用函数创建纹理
        scene.background = textureCube ;//将场景的背景设置为天空图纹理
        textureCube.format = THREE.RGBFormat;

        var shader = THREE.ShaderLib["cube"];//自定义着色器
        shader.uniforms[