✨ 三分钟就能挂彩灯？那你试过用代码点亮圣诞树吗？🎁

bug菌
553 阅读7分钟

🏆本文收录于《滚雪球学SpringBoot》专栏，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！

前言 ✨

  当寒冷的风中弥漫着姜饼的香气，霓虹灯在街道上忽明忽暗闪烁时，我们知道：圣诞节来了！🎅 对于程序员来说，庆祝节日的方式可以不止于挂彩灯、堆雪人。其实，节日气氛也能写进代码，用键盘敲出来。

  今天，我将带你进入一个 “音乐圣诞灯光秀” 的奇幻世界！你可能以为这需要顶级的开发技能？别担心，这是一份充满爱与创意的 DIY 项目(非原创)，适合每个想在节日中为亲友带来惊喜的人。用最简单的工具和创意，我们将结合 Three.js 和音乐频谱分析，一步步打造一个动态的音乐灯光秀。

  来吧，为你的节日增添一点技术感和浪漫色彩，保证你看完后也忍不住去试一试！✨❤️

先给大家看下代码效果：

在线演示效果播放：http://1.94.246.54:8080/christmastree/christmasShow.mp4

线上地址：http://1.94.246.54:8080/christmastree/tree.html

🎅 为什么用代码庆祝圣诞节？

  大多数人一提到圣诞节，脑海中浮现的可能是：🎄圣诞树、🎁礼物、还有暖融融的烛光。但如果你是程序员或者对技术怀有热爱，为什么不通过创造一些“科技魔法”来庆祝这个特别的日子呢？

  • 更环保，更经济：与其去商店买一堆彩灯和装饰品，不如通过虚拟的方式创造节日气氛。
  • 充满个性：市面上的彩灯可能美，但它们千篇一律，而代码给了我们自由，我们可以通过创造让灯光与音乐联动，为节日注入自己的特色！
  • 拉近距离：尤其对于远程工作的程序员，用代码制作圣诞灯光秀，不仅能让自己在家里感受到节日氛围，还能通过线上分享给朋友们，让他们同样沉浸在你的“编程艺术”中。

  你会发现，这不仅是个简单的节日项目，更是一种将技术融入生活的创意尝试。🌟

部分效果：

🎨 技术幕后揭秘：灯光与音乐如何配合？

  接下来的几分钟里，我将用一种浅显但足够有趣的方式，带你剖析整个项目的技术结构。放心，即使你对编程的了解不深，也能轻松看懂——如果看不懂，可以“怪”我写得不够好 😄。

1. 3D 场景的搭建

  想象一下，你需要一个舞台，而 Three.js 就是搭建这个舞台的工具。在这个舞台上，你可以添加灯光、粒子、甚至是漂浮的雪花，模拟出一个虚拟世界中的圣诞夜。

  Three.js 的强大之处在于：即使你没有接触过 3D 图形学，也能通过简单的 API 快速生成酷炫的效果。我们用它来设置摄像机、场景和渲染器，搭建一个足够灵活的灯光秀舞台。

2. 音乐频谱分析

  音乐是灯光秀的灵魂。我们需要一种方式实时分析音乐的频率数据，并用这些数据驱动灯光和粒子的变化。这部分的核心工具是 THREE.AudioAnalyser，它能将音频转化为数据流：

  • **低频（如鼓点）**可以用来控制灯光的亮度。
  • **高频（如旋律）**可以用来改变粒子的大小和颜色。

  简单来说，每一首歌都可以变成一份指挥灯光舞蹈的“乐谱”，而我们只需要用代码读取这些数据，映射到灯光和粒子的动态变化上。

3. 灯光与粒子效果的结合

  粒子系统是灯光秀的核心。我们用粒子模拟圣诞树的灯泡，每个粒子的位置和颜色都可以由数学函数定义。为了让它们更有节奏感，我们把粒子与音频频谱数据绑定，使其根据音乐的节奏跳动、闪烁。

  粒子的大小、颜色、透明度……这一切都可以通过着色器语言（Shader）动态控制。

🧑‍💻 全过程代码实现：灯光秀是如何跑起来的？

🌟 第一步：设置场景和摄像机

  我们用Three.js快速搭建一个3D场景，为后续的灯光秀提供舞台。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    60, window.innerWidth / window.innerHeight, 1, 1000
);
camera.position.set(0, -2, 24);

🎶 第二步：加载音乐并提取频谱数据

  用户可以选择预置音乐，也可以上传自己喜欢的歌曲。以下是音频加载的实现：

const listener = new THREE.AudioListener();
const audio = new THREE.Audio(listener);
document.querySelector("input").addEventListener("change", uploadAudio, false);

function uploadAudio(event) {
    const reader = new FileReader();
    reader.onload = function (e) {
        listener.context.decodeAudioData(e.target.result, function (buffer) {
            audio.setBuffer(buffer);
            audio.play();
            analyser = new THREE.AudioAnalyser(audio, 2048);
            initScene(); // 开始初始化灯光秀
        });
    };
    reader.readAsArrayBuffer(event.target.files[0]);
}

部分效果：

🎄 第三步：圣诞树的粒子效果

  下面的代码通过生成数千个粒子点，模拟出圣诞树的造型，并且让这些粒子随着音乐频谱变化。

function createTree(scene, analyser) {
    const geometry = new THREE.BufferGeometry();
    const positions = [];
    const colors = [];
    const sizes = [];
    
    const color = new THREE.Color();
    for (let i = 0; i < 4000; i++) {
        const angle = Math.random() * Math.PI * 2;
        const height = Math.random() * 20 - 10;
        const radius = Math.random() * (10 - Math.abs(height) / 2);
        positions.push(radius * Math.cos(angle), height, radius * Math.sin(angle));
        color.setHSL(Math.random(), 1.0, 0.5);
        colors.push(color.r, color.g, color.b);
        sizes.push(10);
    }

    geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
    geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
    geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));

    const material = new THREE.PointsMaterial({
        size: 1.0, vertexColors: true, transparent: true, depthTest: false
    });
    const tree = new THREE.Points(geometry, material);
    scene.add(tree);
}

部分效果：

🌟 第四步：动态渲染灯光效果

  灯光秀的核心是渲染循环，我们在每一帧中更新粒子的状态，让它们根据音乐跳动：

function animate() {
    analyser.getFrequencyData(); // 获取频谱数据
    const freqData = analyser.data;
    const maxFreq = Math.max(...freqData);

    // 根据频谱数据调整粒子大小
    tree.geometry.attributes.size.array = tree.geometry.attributes.size.array.map((size, i) => {
        return size + (freqData[i % freqData.length] / 256);
    });
    tree.geometry.attributes.size.needsUpdate = true;

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

部分效果：

🎄 进一步优化你的灯光秀

  1. 增加雪花飘落效果：通过粒子系统模拟雪花，增加节日氛围。
  2. 多层灯光组合：将灯光分成多个层级（如不同的频段控制不同区域）。
  3. 添加互动性：比如让用户通过鼠标或键盘调整视角，甚至手动触发灯光变化。

完整代码

代码执行完整效果演示播放 ， 及 线上地址 ；代码我就不完整贴出来了，影响整体的阅读效果，有需要完整代码的童鞋可在公众号「猿圈奇妙屋」 回复【圣诞代码】关键字即可获取！

🎁 结语：用代码点亮你的节日

  圣诞节是一年中最温暖的时刻，而代码则是我们创造力的体现。当技术和艺术碰撞，会擦出比烟花更炫目的火花。所以，去试试吧，用这段灯光秀为自己的节日增添一抹奇幻色彩。

  在这圣诞之际，愿你的生活和代码一样：流畅、优雅，充满光明与节奏感！🎄✨

需要完整代码的童鞋可在公众号「猿圈奇妙屋」 回复【圣诞代码】关键字即可获取！ ps：代码原型非原创，来源于网络资源参考，如有雷同，纯属巧合。

✨️ Who am I?

我是bug菌，CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家，C站博客之星Top30，华为云2023年度十佳博主，掘金多年度人气作者Top40，掘金等各大社区平台签约作者，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 30w+；更多精彩福利点击这里；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿。

-End-

avatar
文章
阅读
粉丝