Three.js设置天空盒

查看threejs文档可以看到场景Scene的背景属性.background,通过该属性可以设置整个三维场景的背景。通过TextureLoader加载一张贴图,返回一个纹理对象Texture作为Scene.background的属性值是设置一个平面背景,如果想设置天空盒图作为背景,需要通过CubeTextureLoader加载6张天空盒贴图,返回一个立方体纹理对象CubeTexture作为.background的属性值。

CubeTextureLoader加载纹理贴图注意顺序关系,路径中贴图顺序依次是左右上下前后,左右对应x轴方向,上下对应y轴方向,前后对应z轴方向。

    var scene = new THREE.Scene();
    var loader = new THREE.CubeTextureLoader();
    loader.setPath('./贴图/');
    //左右上下前后
    var cubeTexture = loader.load(['left.jpg', 'right.jpg', 'up.jpg', 'down.jpg', 'front.jpg', 'back.jpg']);
    scene.background = cubeTexture