three.js天空盒贴地解决方案

loadSkyBox() { //加载天空盒

				var path = "static/model/skybox/"; //设置路径
				var format = '.jpg'; //设定格式
				var urls = [
					path + 'cube_1' + format, //右
					path + 'cube_3' + format, //左
					path + 'cube_4' + format, //上
					path + 'cube_5' + format, //下
					path + 'cube_0' + format, //后
					path + 'cube_2' + format //前
				];
				// this.textureCube = new THREE.CubeTextureLoader().load(urls);
				// // console.log(this.textureCube)
				// this.scene.background = this.textureCube; //作为背景贴图
				// this.scene.background.center.set(0.5,0.5)
				// console.log(this.scene)

				//CubeTextureLoader加载纹理图
				var cubeMap = new THREE.CubeTextureLoader().load(urls);
				var cubeShader = THREE.ShaderLib['cube']; //着色器库
				cubeShader.uniforms['envMap'].value = cubeMap;
				// console.log(cubeShader)
				var skyBoxMaterial = new THREE.ShaderMaterial({ //着色器材质
					fragmentShader: cubeShader.fragmentShader, //定义自己的片元着色器
					vertexShader: cubeShader.vertexShader, //定义自己的顶点着色器
					uniforms: cubeShader.uniforms, //给着色器传入uniform变量的值
					depthWrite: false, //决定这个材质是否影响WebGL的深度缓存
					side: THREE.BackSide //侧面：反面
				});
				Object.defineProperty(skyBoxMaterial, 'envMap', {
					get: function() {
						return this.uniforms.envMap.value;
					}
				});
				this.skyBox = new THREE.Mesh(
					new THREE.BoxGeometry(2400, 600, 2400), //盒子物体
					skyBoxMaterial
				);
				// console.log(skyBox)
				this.skyBox.position.y = 300 - this.minY - 10;
				this.scene.add(this.skyBox);

				// 正方体(x,y过大贴图会变模糊)
				// const loader = new THREE.TextureLoader()
				// // 创建盒子，并设置盒子的大小为( 5000, 5000, 5000 )
				// const skyGeometry = new THREE.BoxGeometry(3600, 600, 3600)
				// // 设置盒子材质
				// const materialArray = []
				// for (let i = 0; i < 6; i++)
				// 	materialArray.push(
				// 		new THREE.MeshBasicMaterial({
				// 			map: loader.load(urls[i]), // 将图片纹理贴上
				// 			side: THREE.BackSide // 镜像翻转
				// 		})
				// 	)
				// // 创建一个完整的天空盒，填入几何模型和材质的参数
				// this.skyBox = new THREE.Mesh(skyGeometry, materialArray);
				// this.skyBox.position.y = 300 - this.minY - 10;
				// this.scene.add(this.skyBox) // 在场景中加入天空盒
				// console.log(this.skyBox)

				//球体
				// var circleGeometry = new THREE.SphereBufferGeometry(800, 60, 60);
				// circleGeometry.scale(-1, 1, 1);
				// var circleMaterial = new THREE.MeshBasicMaterial({
				// 	map: new THREE.TextureLoader().load("static/model/skybox/all.jpg")
				// });
				// const circleBox = new THREE.Mesh(circleGeometry, circleMaterial)
				// circleBox.position.y=800-this.minY-10
				// this.scene.add(circleBox) // 在场景中加入天空盒
			},

旋转角度时还是会有变形（待解决）