1473 字
7 分钟
冰球 背景
2021-07-21
💻Code
💻Hexo

%%% tip home %%%-

首先感谢大佬的开源项目

%%% ghcard teachtyler/Icosahedron-Geometry %%%-

还有店长的教程糖果屋微调合集 | Akilar の糖果屋 Custom Beautify | Akilar の糖果屋

%%% span red, 未实现：冰球跟随音乐振动 %%%-

希望有大佬来解决这个问题，我这个小菜鸡实在搞不定。

有建议请评论区留言，欢迎！！

7.27 更新：关闭移动端并根据屏幕大小判断是否引入并开启

%%% endtip %%%-

最终效果#

动画2142

引入 js#

只针对 butterfly 主题，其他主题请自己根据情况调整

icebg.js 代码在最下面

在_config.butterfly.yml中inject的bottom:插入代码

-(<script data-pjax src="你自己icebg.js的地址"></script>);

建议修改合适后再通过 jsd 加速插入，因为每个人需求不一样，如果你想要本站一样的效果就改成这样,如果需要自定义请接着看。

当然，建议读者把代码存到自己仓库

如果只需要当背景，而不是头图，到这里就够了，如果想要跟本站一样，参考店长头图透明教程在costom.css文件中加入

/* 头图透明 */
#page-header{
  background: transparent!important;
}

注意：因为 butterfly 版本迭代，店长教程中的配置手机 PC 页面白天黑夜共四个背景图的第一步请按diff代码块配置。因为我就掉坑了

店长教程点这里Custom Beautify | Akilar の糖果屋,建议配合糖果屋微调合集 | Akilar の糖果屋配置手机 PC 页面白天黑夜共四个背景图食用，效果更佳。

然后

然后就没了，就这，对，就这。

自定义#

建议有一定基础的朋友进行自定义修改，比如把球改到侧边栏

icebg.js 我放在了source博客根目录，方便调试，读者可以根据情况修改。

-(<script data-pjax src="/icebg.js"></script>);

自定义只需要修改icebg.js内的代码就可以了，代码还是挺长的，其他的我也不会了，大家看着办吧，有大佬改记得评论区告诉我一下。

// document.write("<script  src='https://cdn.jsdelivr.net/gh/wxydejoy/wxy_bg@main/vendor/simplex-noise.min.js'></script>");

var renderer,
  scene,
  camera,
  composer,
  lights,
  circle,
  skelet,
  particle,
  planet,
  planet2,
  audioArray,
  user_audio_amp,
  audio_wireframe = true,
  primaryColor = null,
  secondaryColor = null,
  thirdColor = null,
  bg_file,
  move_bg,
  bass_wireframe;

function loadScript(src, callback) {
  var script = document.createElement("script"),
    head = document.getElementsByTagName("head")[0];
  script.type = "text/javascript";
  script.charset = "UTF-8";
  script.src = src;
  if (script.addEventListener) {
    script.addEventListener(
      "load",
      function () {
        callback();
      },
      false
    );
  } else if (script.attachEvent) {
    script.attachEvent("onreadystatechange", function () {
      var target = window.event.srcElement;
      if (target.readyState == "loaded") {
        callback();
      }
    });
  }
  head.appendChild(script);
}

function loadlived() {
  if (document.body.clientWidth > 900) {
    document.onreadystatechange = function () {
      if (document.readyState == "complete") {
        loadScript(
          "https://cdn.jsdelivr.net/gh/wxydejoy/wxy_bg@main/vendor/simplex-noise.min.js",
          function () {}
        );
        loadScript(
          "https://cdn.jsdelivr.net/gh/wxydejoy/wxy_bg@main/vendor/three.min.js",
          function () {
            init();
            animate();
          }
        );
      }
    };
  }
}
loadlived();

// if (document.body.clientWidth > 768) {

//     init();
//     animate();

// };

// document.write("<script  src='https://cdn.jsdelivr.net/gh/wxydejoy/wxy_bg@main/vendor/simplex-noise.min.js'></script>");

var renderer,
  scene,
  camera,
  composer,
  lights,
  circle,
  skelet,
  particle,
  planet,
  planet2,
  audioArray,
  user_audio_amp,
  audio_wireframe = true,
  primaryColor = null,
  secondaryColor = null,
  thirdColor = null,
  bg_file,
  move_bg,
  bass_wireframe;

function loadScript(src, callback) {
  var script = document.createElement("script"),
    head = document.getElementsByTagName("head")[0];
  script.type = "text/javascript";
  script.charset = "UTF-8";
  script.src = src;
  if (script.addEventListener) {
    script.addEventListener(
      "load",
      function () {
        callback();
      },
      false
    );
  } else if (script.attachEvent) {
    script.attachEvent("onreadystatechange", function () {
      var target = window.event.srcElement;
      if (target.readyState == "loaded") {
        callback();
      }
    });
  }
  head.appendChild(script);
}

function loadlived() {
  if (document.body.clientWidth > 900) {
    document.onreadystatechange = function () {
      if (document.readyState == "complete") {
        loadScript(
          "https://cdn.jsdelivr.net/gh/wxydejoy/wxy_bg@main/vendor/simplex-noise.min.js",
          function () {}
        );
        loadScript(
          "https://cdn.jsdelivr.net/gh/wxydejoy/wxy_bg@main/vendor/three.min.js",
          function () {
            init();
            animate();
          }
        );
      }
    };
  }
}
loadlived();

// if (document.body.clientWidth > 768) {

//     init();
//     animate();

// };

function rgb2hex(rgb) {
  rgb = rgb.match(
    /^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i
  );
  return rgb && rgb.length === 4
    ? "" +
        ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2)
    : "";
}

function init() {
  var noise = new SimplexNoise();

  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

  renderer.setSize(document.body.clientWidth, document.body.clientHeight);
  // renderer.autoClear = false;
  // renderer.setClearColor(0x000000, 0.0);
  document.getElementById("web_bg").appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 400;
  scene.add(camera);

  circle = new THREE.Object3D();
  skelet = new THREE.Object3D();
  particle = new THREE.Object3D();

  scene.add(circle);
  scene.add(skelet);
  scene.add(particle);

  var geometry = new THREE.TetrahedronGeometry(2, 0); // random particles
  var geom = new THREE.IcosahedronGeometry(7, 1); // center planet
  geom.verticesNeedUpdate = true;
  var geom2 = new THREE.IcosahedronGeometry(15, 1); // wireframe

  var material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading,
  });
  // 碎片数量
  for (var i = 0; i < 100; i++) {
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position
      .set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5)
      .normalize();
    mesh.position.multiplyScalar(90 + Math.random() * 700);
    mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
    particle.add(mesh);
  }

  var mat = new THREE.MeshPhongMaterial({
    color: 0x99cccc,
    shading: THREE.FlatShading,
  });

  var mat2 = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    wireframe: true,
    side: THREE.DoubleSide,
  });

  planet = new THREE.Mesh(geom, mat);
  planet.verticesNeedUpdate = true;
  planet.scale.x = planet.scale.y = planet.scale.z = 16;

  circle.add(planet);

  planet2 = new THREE.Mesh(geom2, mat2);
  planet2.scale.x = planet2.scale.y = planet2.scale.z = 10;

  skelet.add(planet2);

  var ambientLight = new THREE.AmbientLight(0x999999);
  scene.add(ambientLight);

  lights = [];
  lights[0] = new THREE.DirectionalLight(0xffffff, 1);
  lights[0].position.set(1, 0, 0);
  lights[1] = new THREE.DirectionalLight(0x01183c, 1);
  lights[1].position.set(0.75, 1, 0.5);
  lights[2] = new THREE.DirectionalLight(0x00436f, 1);
  lights[2].position.set(-0.75, -1, 0.5);
  scene.add(lights[0]);
  scene.add(lights[1]);
  scene.add(lights[2]);
}

function moveObject(prop, math, num, timer = 0) {
  if (math === "add") {
    prop += num;
  }

  if (math === "subtract") {
    prop -= num;
  }

  if (math === "bounce") {
    prop.x += num;
    prop.y += num;
    prop.z += num;

    setTimeout(() => {
      prop.x -= num;
      prop.y -= num;
      prop.z -= num;
    }, timer);
  }
}

function animate() {
  requestAnimationFrame(animate);

  if (audio_wireframe) {
    var planets = [planet, planet2];
  } else {
    var planets = [planet];
  }

  if (audioArray !== undefined) {
    // var random = Math.floor(Math.random() * audioArray.length - 100) var amp = 1.1;
    var user_amp = eval("1.".concat(user_audio_amp || "80"));
    var bass_user_amp = eval("0.".concat(user_audio_amp || "80"));

    // var user_amp = 1.99 var baseAmp = eval("0.".concat(user_audio_amp)) planet
    planets.map(function (planet) {
      planet.geometry.vertices.forEach(function (vertex, i) {
        var beat = audioArray[i];
        var volume = audioArray.reduce(function (a, b) {
          return a + b;
        });
        if (volume <= 2) {
          beat = beat * 10;
        }

        var offset = planet.geometry.parameters.radius;
        vertex.normalize();
        var distance;
        if (user_audio_amp === 100) {
          beat = beat * 2;
          bass_user_amp = 1;
          distance = offset + beat * user_amp;
          // distance = offset + beat
        } else {
          beat = beat * user_amp;
          var time = Date.now();
          var noiseX = vertex.x + time * 0.0005;
          var noiseY = vertex.y + time * 0.0005;
          var noiseZ = vertex.z + time * 0.0005;
          var planetNoise = noise.noise3D(noiseX, noiseY, noiseZ);
          distance = offset + planetNoise * beat;
          // if (turn_liquid) {
          //     distance = offset + beat + user_amp * planetNoise // turns liquid!?
          // }
          // if (distance > 15){
          //     distance = offset + (beat / 2) * 1.1
          //     debug(distance)
          // }
        }
        // var bass_amp = (bass_user_amp < 0.3) ? 0.3 : (1 - bass_user_amp)
        var bass_amp = 1 - bass_user_amp;
        if (bass_amp <= 0.3) {
          bass_amp = 0.3;
        }
        if (i <= 3 && beat > bass_amp) {
          if (audio_wireframe === false && bass_wireframe) {
            audio_wireframe = true;
            setTimeout(function () {
              audio_wireframe = false;
            }, 250);
          }
          if (move_bg) {
            particle.rotation.x += Math.random() * 0.0005;
            particle.rotation.y -= Math.random() * 0.004;

            circle.rotation.x += 0.002;
            circle.rotation.y -= 0.004;

            var timer = (beat * 100) / 0.2;

            moveObject(skelet.position, "bounce", 0.05, timer);
            moveObject(planet.position, "bounce", 0.05, timer);
            moveObject(particle.position, "bounce", 0.05, timer);
          }
        }

        vertex.multiplyScalar(distance <= 0.1 ? 1 : distance);
      });
      planet.geometry.verticesNeedUpdate = true;
      planet.geometry.normalsNeedUpdate = true;
      planet.geometry.computeVertexNormals();
      planet.geometry.computeFaceNormals();
    });
  }

  particle.rotation.x += 0.0;
  particle.rotation.y -= 0.001;
  circle.rotation.x -= 0.002;
  circle.rotation.y -= 0.003;
  skelet.rotation.x -= 0.001;
  skelet.rotation.y += 0.002;

  renderer.clear();

  renderer.render(scene, camera);
}
冰球 背景
https://f.undf.top/posts/post/hexo/icosahedron-geometry-hexo/
作者
沐印
发布于
2021-07-21
许可协议
CC BY-NC-SA 4.0
AHK脚本
词云图