沐印
欢迎光临
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);
}