three.js贴图之CubeTextureLoader全景贴图

学习交流欢迎加群：789723098，博主会将一些demo整理共享

有时候我们在创建地图街景或者地点全景图的时候，会经常用到THREE.CubeTextureLoader来对场景Scene的背景进行贴图，使之成为一个天空盒，只不过这个天空盒不能看见其外面的情景，无论怎么缩放，始终都在全景内，这是为什么呢？原因很简单，我们是对Scene的背景颜色进行贴图；笔者从官方文档中查到其应用的方法如下：

var scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
	.setPath( 'textures/cubeMaps/' )
	.load( [
		'px.png',
		'nx.png',
		'py.png',
		'ny.png',
		'pz.png',
		'nz.png'
	] );

其中，setPath里面的字符串代表图片所在文件夹，load里面的字符串代表你要贴的六个面对应的六张图片，通过观察不难发现，它们的顺序是有规律的，例如px.png和nx.png是对面，以你为例，此刻的你在电脑屏幕对面，就是这样的关系。好了，啰嗦了一大堆，不知道读者们听懂没听懂，还是直接上demo代码吧：

效果图：