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