原理，在一个立方体盒子中，添加6张上、下、左、右、前、后的图片，作为场景的背景图
image.png
// 创建场景对象
var scene = new THREE.Scene();
/* 使用PerspectiveCamera（透视摄像机）
* 第一个参数：fov 视野的角度，以角度为单位。
* 第二个参数：aspect 长宽比
* 第三个参数：near 近截面
* 第四个参数：far 远截面
*/
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000 );
/**
* 默认情况下，物体将会添加到（0，0，0）的坐标，将使摄像机与立方体重叠
* 我们需要将摄像机稍微向外移动一些
* 相机camera位置属性设置详解](https://www.cnblogs.com/v-weiwang/p/6072235.html)
* */
camera.position.z = 5;
/**
* 添加6张的图像数组，必须（6张）
* 指定顺序: pos-x(右), neg-x(左), pos-y(上), neg-y(下), pos-z（后）, neg-z（前）
* 环境中，上 下 左 右 前 后 六张 视图图片作为立方体盒子的纹理贴图
* */
var path = "/images/";
var urls = [
path + "posx.jpg",
path + "negx.jpg",
path + "posy.jpg",
path + "negy.jpg",
path + "posz.jpg",
path + "negz.jpg"
];
// 使用CubeTextureLoader加载器
var textureCube = new THREE.CubeTextureLoader().load( urls );
// 场景添加纹理贴图
scene.background = textureCube;
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
// 设置设备像素比
renderer.setPixelRatio( window.devicePixelRatio );
// 渲染大小区域
renderer.setSize( window.innerWidth, window.innerHeight );
// 将dom元素添加到body中
document.body.appendChild(renderer.domElement);
// 创建鼠标控制器
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// 渲染动画操作
function animate() {
// 循环的绘制
requestAnimationFrame(animate);
// 更新控制器
controls.update();
// 执行渲染
renderer.render(scene, camera);
}
animate();
// 监听浏览器屏幕缩放，执行场景对浏览器的自适应
window.addEventListener('resize', onResize, false);
function onResize() {
// 渲染窗口的长宽比 如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比
camera.aspect = window.innerWidth / window.innerHeight;
// 更新相机的投影矩阵
camera.updateProjectionMatrix();
// 重置渲染器输出画布canvas尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
}
天空盒子程序思维导图
天空盒子程序结构.png
