three.js添加场景背景和天空盒（skybox）

本文我们介绍在three.js中如何给3D场景添加背景，我们有3种方式来实现这个目的。

1. 通过html添加背景元素，这实际上一个2D背景；

2. 在three.js加载图片并设置为scene.background，这种方法的好处是可以被后处理(post-processing)效果所影响；

3. 在three.js中绘制天空盒作为背景。

第一种是直接在canvas的css样式中设置background（或者background-image），

然后three.js中设置渲染的alpha为true，这样就表示3D场景是透明的，不会隐藏后面的背景。

我们直接在这个立方体例子的基础上进行修改：https://wow.techbrood.com/fiddle/54855

修改后结果如下：

第二种方法也很简单，代码示例如下：

const loader = new THREE.TextureLoader();
const bgTexture = loader.load('/path/to/sky.jpg');
scene.background = bgTexture;

不过这种情况下，背景图片可能会被拉伸，解决方法是设置背景贴图的offset和repeat属性来绘制其中一部分：

// Set the repeat and offset properties of the background texture
// to keep the image's aspect correct.
// Note the image may not have loaded yet.
const canvasAspect = canvas.clientWidth / canvas.clientHeight;
const imageAspect = bgTexture.image ? bgTexture.image.width / bgTexture.image.height : 1;
const aspect = imageAspect / canvasAspect;

bgTexture.offset.x = aspect > 1 ? (1 - 1 / aspect) / 2 : 0;
bgTexture.repeat.x = aspect > 1 ? 1 / aspect : 1;

bgTexture.offset.y = aspect > 1 ? 0 : (1 - aspect) / 2;
bgTexture.repeat.y = aspect > 1 ? 1 : aspect;

但这个方法和第一种方法基本类似，其实还是个2D背景。

更多的情况下，我们需要使用一个3D环境背景，也就是所谓的天空盒（Skybox）。

skybox其实就是一个box模型（这个box一般可以是cube或者sphere），把sky图像绘制在上面。我们把相机放在box里面，这样看起来就像是在一个环境背景中。

实现skybox最常见的方法是制作一个立方体，对其应用纹理，从内部绘制它。在立方体的每一侧放置一个纹理（使用纹理坐标），看起来像地平线上的某个图像。使用天空球体（sky sphere）或天空圆顶（sky dome）也是比较常见的。只需创建一个立方体或球体，应用一个纹理，将其标记为THREE.BackSide，这样我们渲染的是内部而不是外部，然后直接或类似地将其放置在上面的场景中，或者，创建两个场景，一个特殊的场景来绘制skybox/sphere/dome，另一个普通的场景来绘制其他所有内容。使用普通的远景相机来绘制，不需要正交照相机。

实现天空盒的另外一个方法是使用Cubemap，立方体贴图是一种特殊的纹理，它有六个面。它不使用标准纹理坐标，而是使用从中心向外的方向来决定如何获得颜色。要使用它们，我们使用THREE.CubeTextureLoader()加载它们，然后将其用作场景的背景：