Three全景天空盒子-太阳神庙实例

基础环境搭建：

拷贝官方文件至textures/cube/sun_temple_stripe.jpg，图片如下，八等份，六份有图两份空白：

天空盒子：

1. 添加一个基础材质立方体网格模型：
   
2. 定义贴图数组获取函数getTexturesFromAtlasFile()，并向创建贴图数组函数传参：

ImageLoader：用来加载一个Image的加载器。
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : HTMLImageElement

    const textures = getTexturesFromAtlasFile('textures/cube/sun_temple_stripe.jpg', 6)
...
function getTexturesFromAtlasFile(atlasImgUrl, tilesNum) {
    const textures = []
    for (let i = 0; i < tilesNum; i++) {
        textures[i] = new THREE.Texture()
    }
    new THREE.ImageLoader().load(
        atlasImgUrl,
        (image) => {
            console.log(image)
        }
    )
}

console.log(image.height) console.log(image.width)可知图片宽度是高度的八倍

4. 分割图片，创建textures贴图数组

创建< canvas>元素时至少要设置width和height属性，这样才能告诉浏览器在多大面积上绘图。
要在画布上绘制图形，首先要取得绘图上下文。使用getContext()可以获取对绘图上下文的引用，对于平面图形，需要给这个方法传入参数’2d’，表示要获取2d上下文对象。

2d绘图上下文内置支持操作对象，使用drawImage()方法将现有图像绘制到画布上。
CanvasDrawImage.drawImage(image: CanvasImageSource, sx: drawPositionX, sy:drawPositionY, sw: imageWidth, sh: imageHeight, dx: targetPositionX, dy: targetPositionY, dw: targetPositionWidth, dh: targetPositionHeight): void

    let canvas, context
    const tileWidth = image.height
    for (let i = 0; i < tilesNum; i++) {
        canvas = document.createElement('canvas')//创建canvas画布
        context = canvas.getContext('2d')//获取绘图上下文
        canvas.height = image.height
        canvas.width = image.height
        context.drawImage(image, i * tileWidth, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth)
        textures[i].image = canvas
        textures[i].needsUpdate = true
    }

将textures贴图数组作为函数返回值返回。

5. 设置天空盒子材质数组，材质数组每一项对应贴图数组中的每一项（设置为MeshBasicMateria颜色贴图）

    const materials = []
    for (let i = 0; i < 6; i++) {
        materials.push(new THREE.MeshBasicMaterial({
            map: textures[i]
        }))
    }

6. 几何体对象缩放可以进入网格模型内部（我也不太能解释为啥，，，塌缩了？？？）

    skyBox.geometry.scale(1, 1, -1)

7. 设置摄像机位置在网格模型内，此时通过摄像机放缩、平移仍可脱离网格模型（天空盒子），禁用摄像机平移及放缩，启用惯性：

.enableZoom : Boolean 启用或禁用摄像机的缩放。
.enablePan : Boolean启用或禁用摄像机平移。
.enableDamping : Boolean将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。注意若该值被启用，必须在动画循环里调用.update()。

    controls.enableZoom = false
    controls.enablePan = false
    controls.enableDamping = true
    controls.rotateSpeed = -0.025