three实现三维夜晚池塘边萤火虫场景动画代码-html代码-BFW代码库

three实现三维夜晚池塘边萤火虫场景动画代码

代码语言：html

所属分类：三维

代码描述：three实现三维夜晚池塘边萤火虫场景动画代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Nature Scene (Refactored)</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #121212; font-family: 'Inter', sans-serif; }
        #canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
        
        /* UI Styles */
        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; padding: 24px; box-sizing: border-box; }
        .btn { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; background: #1E1E1E; border: 1px solid #333; color: #E0E0E0; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: all 0.2s ease; margin-bottom: 12px; font-size: 20px; }
        .btn:hover { transform: scale(1.1); background: #282828; }
        .btn:active { transform: scale(0.95); }
        
        #settings-panel { pointer-events: auto; background: rgba(30, 30, 30, 0.85); backdrop-filter: blur(10px); border: 1px solid #333; border-radius: 12px; padding: 20px; width: 280px; color: #E0E0E0; box-shadow: 0 8px 16px rgba(0,0,0,0.5); transform: translateX(150%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); position: absolute; top: 80px; right: 80px; }
        #settings-panel.open { transform: translateX(0); }
        .setting-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; }
        .toggle-btn { background: transparent; border: 1px solid #555; color: #aaa; padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: 0.2s; }
        .toggle-btn.active { background: #448AFF.........完整代码请登录后点击上方下载按钮下载查看