沐印
欢迎光临
1473 字
7 分钟
冰球 背景
%%% tip home %%%-
首先感谢大佬的开源项目
%%% ghcard teachtyler/Icosahedron-Geometry %%%-
还有店长的教程糖果屋微调合集 | Akilar の糖果屋 Custom Beautify | Akilar の糖果屋
%%% span red, 未实现：冰球跟随音乐振动 %%%-
希望有大佬来解决这个问题，我这个小菜鸡实在搞不定。
有建议请评论区留言，欢迎！！
7.27 更新：关闭移动端并根据屏幕大小判断是否引入并开启
%%% endtip %%%-
最终效果
引入 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);}