05-Three.js 编写天空盒子

原理，在一个立方体盒子中，添加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

源代码：https://github.com/Is-Yang/threejs-learning