天空盒全景图作为背景

为了让整个三维场景渲染效果更好，一般可以让美术提供一个天空盒全景图。

本小节课件中提供一个.jpg的天空盒全景图，作为整个三维场景的背景使用,查看3.3小节课件即可。

创建球体网格模型

首先创建一个球体网格，半径范围足够大，至少要把收费站窗口附近模型包括在球里面,这样有一种天空盖在地面上的感觉

// 设置一个天空盒背景图
const geometry = new THREE.SphereGeometry(300, 50, 50);
const material = new THREE.MeshBasicMaterial({});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

材质设置背面课件，默认球体外面可见，相机在球体里面，需要设置背面可见。

// 设置一个天空盒背景图
const geometry = new THREE.SphereGeometry(300, 50, 50);
const material = new THREE.MeshBasicMaterial({
    side: THREE.BackSide, //默认正面可见，设置为背面可见即可
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

TextureLoader加载天空盒贴图

// 设置一个天空盒背景图
const geometry = new THREE.SphereGeometry(300, 50, 50);
const texture = new THREE.TextureLoader().load("./天空盒全景图.jpg");
const material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide, //默认前面可见，设置为背面可见即可
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

查看文档webgl渲染器输出的颜色空间.outputColorSpace属性值是THREE.SRGBColorSpace。 为了避免自己加载的颜色贴图产生色差，也要设置为THREE.SRGBColorSpace

texture.colorSpace = THREE.SRGBColorSpace;//设置为SRGB颜色空间,与webgl渲染器一致

Blender建模软件创建天空背景

还有一种更简单方法，不用代码设置，直接美术在Blender中创建一个球体，然后设置一个天空的背景图作为球体颜色贴图。