three实现三维新年下雪夜晚放烟花粒子文字祝福场景动画代码-html代码-BFW代码库

three实现三维新年下雪夜晚放烟花粒子文字祝福场景动画代码

代码语言：html

所属分类：三维

代码描述：three实现三维新年下雪夜晚放烟花粒子文字祝福场景动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎆 新年烟花盛典 🎆</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #0a0a1a; font-family: 'Arial', sans-serif; }
        canvas { display: block; }
        
        #flash {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%, rgba(255,200,100,0) 100%);
            opacity: 0;
            z-index: 10;
            transition: opacity 0.1s;
        }
        
        #info {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 28px;
            text-align: center;
            pointer-events: none;
            text-shadow: 0 0 20px #ff6b6b, 0 0 40px #ffd700;
            animation: glow 2s ease-in-out infinite alternate;
            z-index: 20;
        }
        
        @keyframes glow {
            from { text-shadow: 0 0 20px #ff6b6b, 0 0 40px #ffd700; }
            to { text-shadow: 0 0 30px #ff0000, 0 0 60px #ffff00; }
        }
        
        #startBtn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 25px 50px;
            font-size: 28px;
            background: linear-gradient(45deg, #ff416c, #ff4b2b);
            border: none;
            border-radius: 50px;
            color: white;
            cursor: pointer;
            box-shadow: 0 0 40px rgba(255,65,108,0.6);
            transition: all 0.3s;
            z-index: 100;
        }
        
        #startBtn:hover {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 0 60px rgba(255,65,108,0.9);
        }
        
        #controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 14px;
            opacity: 0.7;
            z-index: 20;
        }
        
        #textDisplay {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            color: #ffd700;
            font-size: 18px;
            opacity: 0.8;
            z-index: 20;
        }
    </style>
</head>
<body>
    <div id="flash"></div>
    <div id="info">🎆 新年烟花盛典 🎆</div>
    <button id="startBtn">🎄 点击开始体验 🎄</button>
    <div id="controls">🖱️ 拖动旋转 | 滚轮缩放 | 右键平移</div>
    <div id="textDisplay">按空格键发射祝福烟花</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.133.js"></script>

       <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
  
    <script>
        let scene, camera, renderer, controls;
        let snowParticles, fireworks = [];
        let textFirework = null;
        let audioCtx, started = false;
        let skyLight;
        const flashElement = document.getElementById('flash');
        
        // 祝福文字列表
        const blessings = [
            "新年快乐",
            "2025",
            "恭喜发财",
            "万事如意",
            "Happy New Year",
            "🎉🎊🎆",
            "吉祥如意",
            "心想事成"
        ];
        let currentBlessingIndex = 0;
        
        // 初始化场景
        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x0a0a2e);
            scene.fog = new THREE.FogExp2(0x0a0a2e, 0.012);
            
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(30, 25, 40);
            
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
       .........完整代码请登录后点击上方下载按钮下载查看