threejs天空图

天空图的原理：可以设置一个物体在最外面当做天空，把物体无限放大，然后设置这个物体的材质，颜色，透明度等等。那么C位出道的就是你放的哪些内容或者某些加载进去的模型等等，C位出道这个只是被相机迷惑了双眼，天空图也同理可证。

1. camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 2200);
   定义相机的位置，2200定为最大范围，不定义的话可能会出错，位置不准确。
   2.// 天空盒 var vertexShader =
   varying vec3 vWorldPosition;
   void main() {
   vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
   vWorldPosition = worldPosition.xyz;
   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
   }
   ; var fragmentShader =
   uniform vec3 topColor;
   uniform vec3 bottomColor;
   uniform float offset;
   uniform float exponent;
   varying vec3 vWorldPosition;
   void main() {
   float h = normalize( vWorldPosition + offset ).y;
   gl_FragColor = vec4(0.85 * mix( 0.85 * bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );
   }
   `;
   var uniforms = {
   “topColor”: { value: new THREE.Color(0xFFFFFF) },
   “bottomColor”: { value: new THREE.Color(0x87CEEB) },
   “offset”: { value: 33 },
   “exponent”: { value: 1.0 }
   };
   // uniforms[ “topColor” ].value.copy( hemiLight.color );

   var skyGeo = new THREE.SphereBufferGeometry(1000, 32, 15);
   var skyMat = new THREE.ShaderMaterial({
   uniforms: uniforms,
   vertexShader: vertexShader,
   fragmentShader: fragmentShader,
   side: THREE.BackSide,
   // transparent: true,
   // opacity: 0.9
   });

   var sky = new THREE.Mesh(skyGeo, skyMat);
   sky.position.y = -100;
   scene.add(sky);`