渐变星空 Sky 粒子背景特效

之前的 Cherry 樱花雨背景特效 感觉太花里胡哨了，自己整了个渐变星空背景，效果看着还不错，有兴趣的伙伴可以观摩一下。

教程

1. [Blogroot]\_config.butterfly.yml 找到 index_img 设置为空：

   # The banner image of home page
   index_img: 

2. [Blogroot]\_config.butterfly.yml 找到 background 设置渐变色：

   # Website Background (設置網站背景)
   # can set it to color or image (可設置圖片 或者 顔色)
   # The formal of image: url(http://xxxxxx.com/xxx.jpg)
   background: 'linear-gradient(to right top, #009fff, #ec2f4b)'

3. [Blogroot]\themes\butterfly\source\css\_global\index.styl 找到 #web_bg 设置渐变动画：

   #web_bg {
       position: fixed;
       z-index: -999;
       width: 100%;
       height: 100%;
       background: $web-bg;
       background-attachment: local;
       background-position: center;
       background-size: cover;
       background-repeat: no-repeat;
       animation: bganimation 10s infinite;
       background-size: 800%;
     }

4. 新建 [Blogroot]\themes\butterfly\source\css\_cyan\index.styl ，添加渐变动画 CSS 和 粒子元素的样式：

   /* 樱花特效样式 */
   .canvas-container {
       position: fixed;
       width: 100%;
       height: 100vh;
       margin: 0;
       padding: 0;
       left: 0;
       top: 0;
       z-index: -1;
   }
   
   // 阅读模式下隐藏背景
   .read-mode .canvas-container {
       display: none;
   }
   // 首页背景渐变动画
   @keyframes bganimation {
       0% {
           background-position: 0% 50%;
       }
   
       50% {
           background-position: 100% 50%;
       }
   
       100% {
           background-position: 0% 50%;
       }
   }

   记得在 [Blogroot]\themes\butterfly\source\css\index.styl 引入，以后所有的 css 都可以写在这个里面

   if (hexo-config('css_prefix')) {
   @import 'nib';
   }
   
   @import '_third-party/normalize.min.css';
   // project
   @import 'var';
   @import '_global/*';
   @import '_highlight/highlight';
   @import '_page/*';
   @import '_layout/*';
   @import '_tags/*';
   @import '_mode/*';
   + @import '_cyan/*';
   
   // search
   if (hexo-config('algolia_search.enable')) {
   @import '_search/index';
   @import '_search/algolia';
   }
   
   if (hexo-config('local_search') && hexo-config('local_search.enable')) {
   @import '_search/index';
   @import '_search/local-search';
   }

5. [Blogroot]\themes\butterfly\layout\includes\layout.pug 添加元素：

   if page.type !== '404'
   +     #canvas.canvas-container
         #body-wrap(class=pageType)
           include ./header/index.pug
   
           main#content-inner.layout(class=hideAside)
             if body
               div!= body
             else
               block content
               if theme.aside.enable && page.aside !== false
                 include widget/index.pug

6. 新建 [Blogroot]\themes\butterfly\source\js\sky.js

   var scene,
       camera,
       renderer,
       container,
       aspect,
       fov,
       plane,
       far,
       mouseX,
       mouseY,
       windowHalfX,
       windowHalfY,
       geometry,
       starStuff,
       materialOptions,
       stars;
   
   init();
   animate();
   
   function init() {
       container = document.getElementById(`canvas`);
   
       mouseX = 0;
       mouseY = 0;
   
       aspect = window.innerWidth / window.innerHeight;
       fov = 40;
       plane = 1;
       far = 800;
   
       windowHalfX = window.innerWidth / 2;
       windowHalfY = window.innerHeight / 2;
   
       camera = new THREE.PerspectiveCamera(
           fov,
           aspect,
           plane,
           far
       );
   
       camera.position.z = far / 2;
   
       scene = new THREE.Scene({ antialias: true });
       scene.fog = new THREE.FogExp2(0x1b1b1b, 0.0001);
   
       starForge();
   
       renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
       renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
       renderer.setSize(window.innerWidth, window.innerHeight);
       renderer.autoClear = false;
       renderer.setClearColor(0x000000, 0.0);
       container.appendChild(renderer.domElement);
   
       document.addEventListener('mousemove', onMouseMove, false);
   }
   
   function animate() {
       requestAnimationFrame(animate);
       render();
   }
   
   function render() {
       camera.position.x += (mouseX - camera.position.x) * 0.005;
       camera.position.y += (-mouseY - camera.position.y) * 0.005;
       camera.lookAt(scene.position);
       renderer.render(scene, camera);
   }
   
   function starForge() {
       var amount = 45000;
       geometry = new THREE.SphereGeometry(1000, 100, 50);
   
       materialOptions = {
           color: new THREE.Color(0xffffff),
           size: 1.1,
           transparency: true,
           opacity: 0.8
       };
   
       starStuff = new THREE.PointsMaterial(materialOptions);
   
   
       for (var i = 0; i < amount; i++) {
           var item = new THREE.Vector3();
           item.x = Math.random() * 2000 - 1000;
           item.y = Math.random() * 2000 - 1000;
           item.z = Math.random() * 2000 - 1000;
   
           geometry.vertices.push(item);
       }
   
       stars = new THREE.PointCloud(geometry, starStuff);
       scene.add(stars);
   }
   
   function onMouseMove(e) {
       mouseX = e.clientX - windowHalfX;
       mouseY = e.clientY - windowHalfY;
   }

7. [Blogroot]\_config.butterfly.yml 找到 inject，引入 js，由于星空动画是基于 three.js，所以一定要先引入 three.js：

   inject:
     head:
       - <script src="https://ali-oss.xmwpro.com/cdn/js/three.min.js"></script>
     bottom:
       - <script async data-pjax src="/js/sky.js"></script>

8. 最后执行 hexo cl,hexo g,hexo s 三连即可看到效果。